How To Enable WooCommerce Color Swatches For Variable Product Variations in Flatsome Theme (Globally)

When you are selling such products which have many attribute variations, it essential to handle product variation smartly. To solve this hurdle, WooCommerce color swatches plugin get popular in the community.

WooCommerce variation swatches and photo plugin replaces WooCommerce default variation select dropdown, and enable color swatches with ease. Besides defining colors for variable product variations, it allows you to show button and image as variations.

Consequently, it fascinates store look and helps visitors to quickly select their desired product attribute variation easily. It means the more quickly user can select their desired variation from your variable product, you get more sales.

Excited to enable WooCommerce color swatches in your store, right? Let’s get started

How To Enable WooCommerce Color Swatches Plugin in eStore

I am assuming you have the Flatsome theme installed. To enable color swatches in your variable products, you have to install WooCommerce Color Variation Swatches Plugin first.

You can download WooCommerce Variation Swatches plugin from your site backend as well. Head to your site dashboard and navigate to Plugins >> Add New. Search for WooCommerce Variation Swatches in the search field. Install and Activate WooCommerce Variation Swatches Plugin by Emran Ahmed.

After successfully WooCommerce Variation Swatches plugin installation and activation, it’s time to create color swatches. Let’s start the process.

Step 01: Create Variable Product Attribute

At the very beginning, we have to create color attribute and its variations globally. To create color attribute globally, navigate to Products >> Attributes. As we’ll create color attribute for our product. Fill the name field with your desired attribute name. In this tutorial, I’ve termed attribute name: Color. 

You can leave Slug field empty. It automatically generates the slug for the attribute. From the Type dropdown select Color attribute type. When mandatory fields are filled, select Add Attribute button.

Color Swatches attribute

After creating attribute, you will notice a list is created in the right side like following screenshot.

Step 02: Create Attribute Variations

The more attributes you would add, they would get added to this list.  When an attribute is created, we need to create attribute variations. To create product variations for attributes, click on the Configure terms from the attribute list.

As we have created a Color attribute. We’ll add colors as variations inside the Color attribute. For demonstrations purpose, I’ll add Green, Blue, and Red variations. To create variation for Color attribute. Fill the Name field with your desired variation name, leave the slug field empty, and select your desired color from the colorpicker.

color options

Step 03: Enable Attribute Variation in Variable Product

It’s time to link globally created color swatch with a variable product. To enable color swatch in your desired product. Get into your desired product edit mode. Make sure you have variable product selected from Product Data.

After selecting the Variable product from Product data dropdown, head to the Attributes Tab. Click on Custom product attribute dropdown. In this dropdown, you can see all your globally created attributes. As we’ve only created a Color attribute, it’s now showing Color attribute.

Now select the Color attribute and click on Add. You can see the following screen comes afterward.

If you want to select all available variations of the color attribute, click on Select all button. If you want to deselect all selected variations at once. Click on Select none. Button. Add all variations selecting Select All button, checked Used for variations settings and click on Save Attributes button. Check the following screenshot for guideline.

Now get into Variations tab. Click on Add Variation dropdown. Here you will notice two options. First one is Add Variation which allows you to insert variation to this variable product one by one. On the other hand the second one is Create variations from all attributes which allow you to added entire available variations at once.

In this tutorial, I am going to select Create variation from all attributes and click Go button. It’ll add all available variations like the following.

You can see the above image that Blue, Green, and Red color variations are there. From this screen you can add variation image, variation price, and other variation specific details. When you have done with adding all your required details in each variation, click the Save Changes button.

Please Note! Don’t forget to add the price in each variation, otherwise, variations won’t be visible on the product frontend.

If you can successfully add Flatsome product variation swatches. You can see the following view in your product frontend.

color swatch enabled

Simple Settings

The WooCommerce variation swatch is a powerful plugin. It allows you to enable Tooltip, disable plugin default stylesheet, and switch between Round and Square shapes.

If you change Shape style from Round to Square and enable Tooltip, the frontend product page looks like the following.

color swatches woocommerce

Advanced Settings

To provide ultimate flexibility, WooCommerce Variation Swatches plugin offers a couple of advanced settings to give you more. The settings allow you to control variation swatch width, height, and font-size. The awesome part, I’ll post is the Attribute Behavior option to present out of stock variation smartly.

woocommerce swatches setting

If you select a Blur option from Attribute Behavior, the out of stock variation would look like the following screenshot.

Enable Color Swatches on Store Pages of Flasome Theme

Besides adding color swatches in the product pages, the WooCommerce Color Swatches plugin allows to add swatches on the product archive pages as well. To add the feature, you need premium version of swatches plugin. If you haven’t download it, download now.

To enable color swatches on the store pages of Flatsome theme. Navigate to Archive / Shop page. Check the settings Show on archive to show color swatches in the store/archive page. Even In Flatsome theme you can enable swatches before and after add to cart button in the store from Archive Swatches Position settings. On top of that you can exclusively control the size of color variation swatch from this settings.

After making swatches enabled on the store page, it looks like the following screenshot.

Customize Tooltip and Swatch On the Store/Archive Pages

Customizing tooltip color and making variation swatches enabled in Flatsome theme in store pages is the premium feature of this plugin. To enable this, you have to download Premium Version of WooCommerce Variation Swatches plugin first.

Enable Tooltip

You can customize tooltip background and text color from the Advanced settings. Check the following screenshot to customize the tooltip style.

tooltip color

The tooltip frontend Preview looks like the following screenshot.

select color


This technology will boost your site usability and conversion. If you face any issue while installing this plugin in Flatsome Theme, let me know in the comment below.