How To Customize Variation Swatches Selected Style

If you have WooCommerce variable products on your site, you can easily add different variations when the prospect selects one.

With Variation Swatches for WooCommerce, you can easily customize the swatches Selected Style.

Today, you’ll learn how to Customize Variation Swatch Selected Style for your products.

So, let’s get started.

Customize Variation Swatches Selected Style #

If you don’t have the plugin install and activated on your site, follow this guide to install and activate Variation Swatches for WooCommerce.

Now, follow these simple steps to customize global styles for your variable products.

Step 1: Enable Dropdown to Button Swatch #

1. Click on the Controls tab on the left.

2. Here, turn On the Dropdown To Button Swatches option.

3. Then Click on to Save Settings.

Now you will see that the variations on product pages will be displayed in the form of button swatches.

Step 2: Customize The Variation Swatches Selected Style #

Once you are on the General section of the plugin, you’ll be able to see a section where you can customize the Swatches Selected Style.

Here you’ll find two options:

• Background Color
• Color

Background Color #

You can use this option to change the background color when the prospect selects one.

Now Click on the box, and you will get the option to assign a color.

Let me assign the Dark Gray as the Background color.

Then click on the Save Settings button below.

Color #

These options will let you define a change in the color when the prospects selects one.

Now Click on the box, and you will get an option to assign a color.

Let me assign White as the font color.

Then click on the Save Settings button below.

Now you will see that the variations on product pages will change it’s color when you hover the mouse on the variations.

As you can see, it’s really simple.

That’s how you can easily customize the swatches selected style on your variable product pages.