This topic has 5 replies, 2 voices, and was last updated 1 years, 5 months ago ago by Hassan
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
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
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.
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
Hi Rose,
This works a treat.
You are awesome.
Thanks for your help.
The issue related to '‘Changing variation swatch colour background on hover’' has been successfully resolved, and the topic is now closed for further responses