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

Having product variation is a common fact for eCommerce. If you’ve got an eCommerce, it’s pretty sure that you need to set up your store for the variation of your products. WooCommerce Color Swatches can help you to do that.  

In WooCommerce, you are given a dropdown by default to handle WooCommerce product variation

I know what are you thinking right now! You’re thinking, “so what! Why these guys are making a fuss?”

Let us clear our point of view. We believe every eCommerce owner’s target is to increase sales and keep visitors to their site. To keep them longer, you need to give them a seamless experience so that they feel comfortable staying at your site for a long time. 

The dropdown to see variations of the products is an old-school process, also it requires more clicks to view a variation. This is not a comforting experience for the visitors, that’s why you should use something that can smoothen the experience of viewing different variations. Here comes variation swatches for WooCommerce to make things easy and seamless. Though Variation Swatches offers color, image, and button swatches, in this article, we’ll only focus on Color Swatches. 

There are several direct and indirect benefits of using WooCommerce Color Swatches for product variations. Let’s find out some! 

  1. It gives your visitors a smooth experience
  2. Exploring color variations can increase the sales
  3. Visitors need fewer clicks to view a product’s variation
  4. A better user experience sends search engines a positive signal so that they can promote this content

Excited to enable WooCommerce color swatches in your store, right? Let’s get started with the whole process!

How To Enable WooCommerce Color Swatches Plugin in eStore

Before getting started, we want to inform you about some prerequisites. The first one is a WooCommerce theme. You need a WooCommerce theme to get started with the WooCommerce variation swatches free plugin. You can choose any free or premium theme for your store. We would suggest you use a high-quality theme like Flatsome, storefront, etc. Then you need to install the plugin Variation Swatches.

Step 1: Go to the Dashboard.

Step 2: Hover the cursor on the Plugins, then click Add New.

Step 3: A search page will appear. On the top right, you’ll find a search box. Type WooCommerce Variation Swatches, then install and activate the plugin.

So, the prerequisites are prepared. Now, we can move forward to use Variation Swatches to enable color swatches for variable product variations.

 
Variation Swatches for WooCommerce

After successfully installing, and activating the WooCommerce Variation Swatches plugin, it’s time to create color swatches.

Let’s start the process!

Step 01: Create Variable Product Attribute

At first, we need to create a color attribute and variations globally. To create it, go to the Dashboard, click on the Products, then go to the Attributes. You’ll find an Attributes box. Fill in the required fields as your requirement. For demonstration purposes, we’re naming the attribute as Color. We’re leaving the slug empty because it automatically generates a slug for the WooCommerce product attribute. We’re selecting Type as Color.

You can choose the options, and name as your preference. If you don’t have any, follow ours. After completing the required fields, click on the Add Attribute button.

 
Color Swatches attribute
 
 

After that, a list will be created on the right side like the following screenshot.

 
 
 
 

Step 02: Create Attribute Variations

You can add more attributes to the list using the same process. After creating an attribute, you need to create attribute variation. For creating product variations for attributes, go through the list and click on the Configure terms of the attribute.

 
 
 
 

We’ve created Color attribute for example. Inside the color attribute, you can add colors as variations inside the attribute. You can also choose any color you want, but for demonstration purposes, we’ll add Red, Green, and Blue. In short, to create a variation, fill the name field, leave the slug empty, and select color.

 
 
color options
 
 

Step 03: Enable Attribute Variation in Variable Product

Now, we need to link a globally created color swatch with a variable product. For enabling attribute variation products,  go to the products, and edit them. Be conscious about selecting a variable product from Product Data.

 
 
 
 

After that, click on the Attributes on the left. A new page will be opened. There is a dropdown named Custom product attribute where you can find all globally created attributes. Here, you’ll see the only Color attribute, because you just created only the Color attribute.

 
 

Select the attribute you want to select, for demonstration purposes, select Color. After selecting, this page will come up.

 
 

To select all available variations, click on the Select all button. You can also deselect the all button by clicking Select none. Then tick the Used for variations, and click Save attributes.

 
 
 

Click on the Variations Tab, then a new page will appear. There you’ll notice two options, one is Add Variation, and another is Create Variations from all attributes.

 
 
 
 

Select any option from these two options. For demonstration purposes, we’re going to select Create variation from all attributes.

 
 
 

Now, the color variations are visible with the products. You also add more variation-specific details here such as variation images, variation prices, and other variation specific. After doing all of that, click the Save Changes button. 

P.S: Add prices in each variation, otherwise, variations won’t be visible on the product frontend. 

After successfully adding variation swatches, the individual product page will look like that. You can customize the product page WooCommerce by following some steps.

 
 
color swatch enabled
 
 

Simple Settings

Variation Swatches is an essential plugin for WooCommerce sites. More than 300K+ WooCommerce sites are using this plugin. It helps you to active Tooltip, disable plugin default stylesheet, and switch between round and square shapes.

 
 
 

Change the Shape style from Round to Square, and enable Tooltip. After that, the product page’s front end will look like that.

color swatches woocommerce
 
 

Advanced Settings

Variation Swatches also have some advanced features that can give you more. You can control Variation Swatch’s width, height, and font size. It also offers to display out-of-stock smartly.

 
woocommerce swatches setting
 

To display out-of-stock, you need to select the Blur option of Attribute Behavior. After selecting that, your product will respond as the following.  

 
 

Enable Color Swatches on Store Pages of Flatsome Theme

Along with adding color swatches to the product pages, you can also add the WooCommerce Color Swatches on the product archive pages. To use this feature, you need to upgrade your version to the pro. If you haven’t the pro version yet, get it to use the full power of Variation Swatches.

For enabling color swatches on the archive/shop page, check the settings Show on the archive to show color swatches on the store/archive page. If you’re using the Flatsome theme, you can enable swatches before and after adding to the cart button in the store from the Archive Swatches Position settings. You can also control the size of the color variation swatches from those settings.

 
 
 

When you enable swatches on the store page, it’ll look like this. 

 
 

Customize Tooltip and Swatch On the Store/Archive Pages

If you want to customize the tooltip color and enable variation swatches in the store, you need to use the premium version of the variation swatches.

Enable Tooltip

Using Advanced settings, you can customize the tooltip background and text color. To customize the tooltip, check below.

 
 
tooltip color
 
 

The final preview of the tooltip frontend. 

select color
 
 

Conclusion

This technology will boost your site’s usability and conversion. It also ensures that your customers get a seamless experience while visiting your site. Moreover, indirectly it can improve your sales, and help you to grow your WooCommerece store.

If you face any issues while installing this plugin in the Flatsome theme, let us know in the comment section. We’ll try to respond ASAP! 

2 thoughts on “How To Enable WooCommerce Color Swatches For Variable Product Variations in Flatsome Theme (Globally)”

  1. Pingback: How To Enable Color Swatches for WooCommerce Variable Product Attributes in Flatsome Theme - GetWooPlugins

  2. Pingback: How To Enable WooCommerce Attribute Images Swatches in Flasome WordPress Theme - WPCred

Leave a Comment

Your email address will not be published.