Return to previous page

How i can change size watch on active color of swatch and text

This topic has 2 replies, 2 voices, and was last updated 3 months, 1 weeks ago ago by Tony Rodriguez

Focu5

Participant

January 31, 2024 at 07:51

hello i how i can change size swatches color when active or hover black circle with white text?

https://ibb.co/qkryhhY

#381874 Copied Theme version: 9.2.4 WooCommerce version: 8.3

1 Answer
Tony Rodriguez

Support staff

January 31, 2024 at 12:21
Hello, @Focu5,

Thank you for contacting us and for using XStore.

To modify the color of the variation swatches on the single product page, we kindly ask you to implement the following CSS code. Please navigate to XStore > Theme Options > Theme Custom CSS > Global CSS in your website’s admin panel and paste the code provided below:
```
.single-product form.variations_form.cart li.type-label.selected span {
    background-color: #000 !important;
    border-radius: 100% !important;
    color: #fff !important;
}

.single-product form.variations_form.cart li.type-label:hover span {
    background-color: #000 !important;
    border-radius: 100% !important;
    color: #fff !important;
}
```
Should you wish to customize the color further, feel free to adjust the hexadecimal color values in the code to suit your preferences.

The result should look like this: https://pasteboard.co/8nvETXdMBtaX.png

We appreciate your attention to this matter and are here to assist should you have any questions or require further guidance.

Best Regards,
The 8Theme Team
#381928 Copied
Tagged: active color modification, best selling themes, change swatch size, swatch color change, text size adjustment, watch size alteration, woocommerce themes
Viewing 2 results - 1 through 2 (of 2 total)