If you have WooCommerce variable products on your site, using smart variation swatches is a suitable way to display your product variations.
With Variation Swatches for WooCommerce plugin, you can easily customize the swatch hover styles of your variation swatches.
This will make the swatches on your product page more attractive.
Today you’ll learn how to customize swatch hover styles.
Let’s get started.
Customize Variation Swatch Hover Style #
To customize the swatch hover styles, you need to have the plugin Variation Swatches for WooCommerce installed and activated on your site.
If you don’t have the plugin install and activated on your site, follow this guide to install and activate Variation Swatches for WooCommerce.
Once you’ve installed and activated the plugin, you can convert WooCommerce default dropdown variations of your products to button swatches in just one click.
Now you can customize the swatch hover styles.
Follow these simple steps.
1. Go to your WordPress Dashboard > Swatches > General.
2. Here you’ll find an option named Swatches Hover Style.
Here you’ll find two options:
- Background Color
- Color
Let’s have a look how you can customize these two:
i. Customize Swatches Background Color #
You can use this option to change the background color of swatches when your buyer hovers on it.
1. Click on the box, and you will get the option to assign a color.
Here, the background color is assigned as dark grey.
2. Click on the Save Settings button below.
ii. Customize Swatches Font Color #
This option allows you to define a change in the color of the font when your buyer hovers their mouse on a swatch.
1. Click on the box, and you will get the option to assign a color.
Here, the font color is set as white.
2. Click on the Save Settings button below.
Here, you can see that the variations on product pages will change it’s color when you hover the mouse on the variations.
That’s it. It’s really simple and easy to customize the swatches hover styles.
