Return to previous page

How can I remove the variation swatches when

This topic has 11 replies, 2 voices, and was last updated 7 months ago ago by Rose Tyler

Jade

Participant

May 11, 2024 at 03:17

Hello,

I would like to remove the variation swatches on the products on any of the pages besides when viewing the product itself. I want them to stay on the single product page but when viewing products on other pages or categories I would like to hide them to make the site look cleaner and less cluttered.

Please help me figure this out.

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#394707 Copied Theme version: 9.3.9

10 Answers

Rose Tyler

Support staff

May 11, 2024 at 07:17

Hello, Jade,

Thank you for reaching out to us with your request. We understand that you would like to remove the variation swatches from the products on all pages except for the single product page, to achieve a cleaner and less cluttered appearance on your site.

We can certainly assist you with this customization. Please go to Theme Options > WooCommerce > Shop elements > Variation swatches > Position > Disable.

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Best Regards,
8Theme’s Team

#394722 Copied

Jade

Participant

May 15, 2024 at 00:00

Hi Rose,

I followed the instructions but the variations are still active on the products.

Files is visible for topic creator and
support staff only.

#395161 Copied

Jade

Participant

May 15, 2024 at 00:04

Ok never mind the variations only show on the store front but not on the other pages.

Thank you for helping me. I also have another question. For the prices listed under the product they are displaying grey but I want them black. How can I change this, please?

Files is visible for topic creator and
support staff only.

#395162 Copied
Rose Tyler

Support staff

May 15, 2024 at 07:24
Hello, Jade,

We appreciate your prompt response.

Custom CSS code can be used:
```
.content-product .price {
    color: #000 !important;
}
```
https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/

Best Regards,
8Theme’s Team
#395196 Copied
Jade

Participant

May 16, 2024 at 05:13

Hi Rose,

So, thank you for the code it helped. However, I noticed the price and details still show in a grey tone in quick view. Shown in the attached screenshot. The category and tag are also in grey.

Files is visible for topic creator and
support staff only.

#395373 Copied
Rose Tyler

Support staff

May 16, 2024 at 07:51
Hello, Jade,

You’re welcome!

Could you please update the previous code as per your earliest convenience?
```
.product-content .price, .et-popup-wrapper .product-content .price, .single-tags span, .product_meta span span, .single-tags a, .product_meta span a, .product-share .menu-social-icons li a {
    color: #000;
}
```
Best Regards,
8Theme’s Team
#395408 Copied
Jade

Participant

May 21, 2024 at 22:20

Hi

So I added this code and as soon as I did it their happens to appear to be broken CSS on my site now. Im not sure how this would cause the site to display how it is now but something happened to break the CSS. Can you help me adjust this please. Attached is the image for reference.

Files is visible for topic creator and
support staff only.

#396156 Copied

Rose Tyler

Support staff

May 22, 2024 at 07:38

Hello, Jade,

We would like to inform you that adding custom CSS code solely to alter color settings should not cause any disruptions to your website’s functionality.

We have successfully resolved the issue by disabling and then re-enabling the cache plugin on your site. We kindly ask that you clear your browser’s cache as well to ensure that the changes take effect.

Best Regards,
8Theme’s Team

#396193 Copied

Jade

Participant

May 24, 2024 at 22:17

Hi,

Rose thank you so much for helping me with this! I appreciate your support patience and knowledge. Thank you again I truly am grateful for it…

#396568 Copied

Rose Tyler

Support staff

May 25, 2024 at 07:15

Hello, Jade,

You’re welcome!

Best Regards,
8Theme’s Team

#396585 Copied
Tagged: customize woocommerce product pages, edit woocommerce product variations, manage woocommerce variation swatches, remove variation swatches woocommerce, wordpress woocommerce themes customization
Viewing 11 results - 1 through 11 (of 11 total)

The issue related to '‘How can I remove the variation swatches when’' has been successfully resolved, and the topic is now closed for further responses

How can I remove the variation swatches when

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection