Color Attribute nont showed on Home Page

Hello,
I’m setting (bike template) attributes (colors) to display like images under products.
The Home page is showing only text, how can i change it to colors? On product page i see colors images, I’d like could be the same in HP.

Thankyou in advance

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for choosing our theme and for contacting us.

In order to activate the attribute, navigate to Products > Attributes > enter the attribute and enable “Show attribute label on products”

Best Regards

Thankyou for your queekly reply,

I see attribute label on products, but in Home page products are showing it like text, not color labels.

Thankyou

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .product-label.attribute-label:not(.label-with-img) {
    background-color: rgba(0,0,0,.7);
    color: #ffffff;
}

You will get the result as follows: https://prnt.sc/t50p67

Best Regards

I’m sorry I said wrong. I would like to display only the colors in HP and not the text.
As in the shop page, I attach screenshot from shoppage.

Attachments:

You must be logged in to view attached files.

Hello,

Do you mean the color swatches on the product page and in the shop page? If yes, please check this instruction: https://xtemos.com/docs/woodmart/variable-products-swatches/

If you mean something different, please clarify.

Best Regards

I mean: now on HP and shop page i see text labels for color attributes (attached image 1), I’d like no text labels, but colors (attached image 2).
What I have to do to set on colors and not text labels?

Attachments:

You must be logged in to view attached files.

Hello,

You need to disable “Show attribute label on products” and configure the swatches as per this instruction: https://xtemos.com/docs/woodmart/variable-products-swatches/

Then you should set the same design on hover in the Product Grid (https://xtemos.com/docs/woodmart/faq-guides/product-grid-carousel-element/) which you set for the shop page in the Theme Settings > Shop page > Product Style.

Best Regards

[Author]

Posts