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.

 
See also  12+ Top House Renovation WordPress Theme 2023
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! 

Subscribe To Our Newsletter!
Hi, I’m Mohamed. I share delicious recipes that I have cooked and loved. I’ve been food blogging for over 10 years and have a Diploma in Nutrition. You will find many healthy recipes as well as my favourite comfort food on the blog because I believe in a balanced diet.

Related Posts

Fintech’s biggest hits and misses of 2023

As 2023 comes to a close, we’re here to look back at the biggest fintech stories of the year. Silicon Valley Bank’s implosion felt like a fintech…

It’s critical to regulate AI within the multi-trillion-dollar API economy

Alex Akimov Contributor With two decades of tech leadership experience, Alex Akimov, former head of API at Adyen, now revolutionizes embedded finance at Monite by building best-in-class…

EU’s provisional deal on gig worker rights fails to get enough backing from Member States

Not so fast on that Christmas present for precarious gig workers in the EU: A political deal announced mid month, which aims to bolster platform workers rights…

Arduino exploring India manufacturing to limit counterfeit sales

Arduino is considering manufacturing in India. The startup, best known for its open source microcontroller boards, hopes to restrict the rise of counterfeit boards and cater to…

Top robotics names discuss humanoids, generative AI and more

Last month, I took an extended break. In a bid to keep my robotics newsletter Actuator (subscribe here) up and running, however, I reached out to some…

Pornhub owner pays US government $1.8M to resolve sex trafficking probe

Pornhub’s parent company Aylo Holdings will pay $1.8 million to the U.S. government to resolve a charge of profiting off of sex trafficking. The company, formerly known…