Return to previous page

Changing variation swatch colour background on hover

This topic has 5 replies, 2 voices, and was last updated 9 months, 2 weeks ago ago by Hassan

Hassan

Participant

July 13, 2023 at 12:39

Hi,

The variation swatches only enable us to change the border colour instead of the background colour on hover/active.

Is their any way we can change the background colour so when the user hovers and selects a variation, that it changes the colour of the swatch background so they know what they have selected?

Many thanks

#361892 Copied Theme version: 9.1.8 WooCommerce version: 7.8.2

4 Answers
Rose Tyler

Support staff

July 13, 2023 at 12:50
Hello, Hassan,

Thank you for contacting us and for using XStore.

Please try to use the next custom CSS code:
```
ul.st-swatch-size-large li.type-label:hover,
ul.st-swatch-size-normal li.type-label:hover {
    background-color: #1a387b;
    color: white;
}
```
Kind Regards,
8theme team
#361893 Copied
Hassan

Participant

July 18, 2023 at 11:07

Hi that code works great. However, how do we make the active button stick on the same colour? so the customer knows what they have selected.

#362252 Copied
Rose Tyler

Support staff

July 18, 2023 at 14:07
Hello, Hassan,

Thank you for your response.

Please change previous code to:
```
ul.st-swatch-size-large li.type-label:hover,
ul.st-swatch-size-large li.selected,
ul.st-swatch-size-normal li.type-label:hover,
ul.st-swatch-size-normal li.selected  {
    background-color: #1a387b;
    color: white;
}
```
Kind Regards,
8theme team
#362268 Copied
Hassan

Participant

July 19, 2023 at 12:47

Hi Rose,

This works a treat.

You are awesome.

Thanks for your help.

#362364 Copied
Tagged: colour, hover, swatch, themes, variation, woocommerce, wordpress
Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘Changing variation swatch colour background on hover’' has been successfully resolved, and the topic is now closed for further responses

Changing variation swatch colour background on hover

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection