Return to previous page

Variation swatches to display correctly on category pages

This topic has 10 replies, 3 voices, and was last updated 1 years, 11 months ago ago by Olga Barlow

AshleyW

Participant

May 24, 2022 at 10:06

When I turn variation swatches on, it automatically displays available sizes for each product on the category pages.

I don’t want all the available sizes displayed on my category pages, only the circles for the colour options. I have had to turn variation swatches off temporarily, but how do I change it so that Colour Variations display for each product on category pages and not the sizes?

#324477 Copied Theme version: 8.1.6 WooCommerce version: 6.5.1

9 Answers

Rose Tyler

Support staff

May 24, 2022 at 11:53

Hello,

Theme Options > WooCommerce > Shop elements > Variation swatches > Primary Attribute > Color. Then hide sizes using custom CSS code. Enable variation swatches, so we can give you correct code.

Regards

#324484 Copied

AshleyW

Participant

May 24, 2022 at 14:19

Yes, that is how I done it before but couldn’t understand why sizes showed and not colours.

Okay, I have enabled variation swatches again so please let me know the code to hide the sizes. also, where do I put the code. Thanks.

#324507 Copied
Olga Barlow

Support staff

May 24, 2022 at 18:36
Hello,

Add the below code to Theme Options > Custom CSS
```
.content-product .product-details ul.st-swatch-preview[data-attribute="pa_size"] {
    display: none;
}
```
Regards
#324521 Copied
AshleyW

Participant

May 25, 2022 at 09:13

Hi,

Okay, thanks. I have put the code in Theme Custom CSS – Global CSS, is that correct? It has removed the sizes variations, but the colour variations are still not showing. The swatches are enabled, with primary attribute ‘colour’ but they don’t appear on the category pages. Is there something else I need to change? Thank you.

#324558 Copied

Olga Barlow

Support staff

May 25, 2022 at 21:02

Hello,

I don’t see that you use swatches for the color attribute https://prnt.sc/wMrQVNQdekTu You use the default select type for that. Edit the attribute and set the color type for that if you want to display that on the shop page.

Regards

#324604 Copied

AshleyW

Participant

May 26, 2022 at 15:38

Hi,

Thanks, I have done that (choosing color circle) and the colour swatches now show on the category pages – however they are all black, no colours. I have all the colours in ‘attributes’ but they are not showing at all. I wondered if it was because my attribute is spelt colour, not color, but I have the same on my other site and its okay. There must be something else i need to do?

Also, I preferred the dropdown menu for colour choice on the product pages. By choosing to display swatches on the category pages, now I have them also on product pages (also all black circles). Is there a way of keeping the colour swatches on the category pages but still having the dropdown menu for colour choice on the product pages? thanks.

#324653 Copied

Olga Barlow

Support staff

May 26, 2022 at 17:20

Hello,

You are welcome.
Watch the video tutorial for the variation swatches https://youtu.be/LgzC4iK-j6A
You need to manage every term you have and set the color https://prnt.sc/EKjpsK3OtKu8

Provide us with link to the product where you still have the drop-down for the colors on the single product page.

Regards

#324667 Copied

AshleyW

Participant

May 27, 2022 at 09:44

Okay, thanks I’ve done it now. I thought that they would already be there because we copied the database from another site. I didn’t realise the colours weren’t copied too.

The dropdown option for colour choices on the product pages have gone since setting up the swatches, so I cannot provide a link to any product with the dropdown menu.

I did prefer the dropdown option so customers could choose colour rather than colour circles (which I only wanted to show on category pages), is there a way to get that back without losing the circle colour swatches on the category pages?

#324704 Copied

Olga Barlow

Support staff

May 27, 2022 at 10:13

Hello,

Unfortunately, you can’t use the drop-down on the single product page and variation swatches on the category page. Either variation swatches on both or without swatches for the color, sorry.

Regards

#324708 Copied
Tagged: category pages, correctly displayed, themes, variation swatches, woocommerce, wordpress
Viewing 10 results - 1 through 10 (of 10 total)