How To Customize Variation Swatches Global Style

If you have WooCommerce variable products on your site, you may want to display your product variation in an attractive way.

One way you can do it is by using smart variation swatches.

With Variation Swatches for WooCommerce, you can easily customize the swatches Global style easily to make smart swatches.

Today, you’ll learn how to customize the Variation Swatches Global Style for your variable products.

So, let’s get started.

Customize Variation Swatches Global Style #

To Customize the global styles for your variable products, 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.

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 Swatches Global 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 global style.

Here you’ll find some options:

1. Shape Height
2. Shape Width
3. Font Size
4. Background Color
5. Font Color
6. Shape Style
7. Border Enable/Disable
8. Tooltip Enable/Disable

Let’s have a look at these options:

1. Shape Height #

In this field, you can select the preferred height that you want to display to your prospects.

2. Shape Width #

Here, select the width according to height, if you want to display the swatches styles as rounded or squared, otherwise a difference in height and width may change your swatches to an oval or rectangular shape.

3. Font Size #

If you have products with label swatches on your store, you can easily control the font size with this option.

You can choose any size of the label variation according to your preferences.

4. Background Color #

You can use this option to change the background color of the swatches.

Now Click on the box, and you will get the option to assign a color. Let me assign the Light Gray as the Background color.

Then click on the Save Settings button below.

Now you can see the background color of the swatch has changes to Light gray.

5. Font Color #

These options will let you define a change in the color of the font of the swatches.

Now click on the box, you’ll get an option to assign color to the fonts. Let me assign White as the Font Color.

Click on to the Save Setting below.

Now you can see the font color has changed to White.

6. Shape Style #

With the Shape style option, you can show the swatches as rounded or squared.

Select the style as Rounded or Squared.

And click on to Save Settings.

7. Border Enable/Disable #

In the border enable/disable option you can select the border width, border style, and the border color.

Now, let me select border width as 1px, border style as solid but you have four more options to choose, such as solid, dashed, dotted, double and choose the border color as black.

Now click on to Save Settings button.

8. Tooltip Enable/Disable #

Enable the option to view tooltip.

In this option, you can customize the tooltip font size, tooltip background color, and tooltip font color.

However, you don’t need to assign anything in the field initially. It will appear on the product page like the following image.

But if you want to customize according to your desire, you can make the changes happen.

So you can see, it’s really simple.