How To Enable Label, Image and Color Swatches For Variable Product Variations

Swatches technology replaces the default WooCommerce product variation dropdown and turn them into label, image, and color swatches. Let get into process to enable swatches for WooCommerce variable product variations. 

Configuring swatches for is simple. There are two ways to install this plugin in Flatsome.

  1. Setup Variation Swatches for new variable products
  2. Enable Variation Swatches for old variable products

In this tutorial I am going to describe both the ways.  

Setup Variation Swatches For New Variable Products

This setup include to show process to enable variable products and Variation swatches simultaneously. If you don't have any variable product created in your site, you can start from here. 

Step 01: Setup Swatches Plugin 

To enable label, color and image swatches, it require a simple variation swatches plugin. Head to WordPress Dashboard and Navigate Plugins >> Add New and search for WooCommerce Variation Swatches. Install & Activate the first plugin. Check the following screenshot. 

Step 02: Create Global Attributes and Variations 

After successfully plugin installation and activation, create your desired attribute globally from Products >> Attributes. Create Color, Image and Label variation enter attribute title and corresponding attribute type from Type dropdown. 

When color, image and label attribute is created successfully, it create a list of attribute in left. 

After creating Global attribute color, image and label, add attribute variations selecting  Configure Terms. To create variations for color attributes, select Configure terms links. Fill Name field and select color codes. Create Green, Blue and Red variation color for color attributes. 

A list of attribute variations comes up in the left screen after adding variations for color attributes. 

Get to the Products >> Attributes again. Create variations image attributes, select Configure terms links from image. Fill Name field and add variation image from media library or upload from computer. 

Create   Denim, Cambric, and Cotton variations for image attributes and they will appear in left. 

Create variations for label attributes like the Image and Color variations. 

Step 03: Display Swatches in Variable Product Page

To enable swatches on the variable product page. Get into your desired product edit mode, select  variable product from Product Data.

Head to the Attributes Tab. Click on Custom product attribute dropdown. Here all globally created attributes get appeared. Add all attributes one by one. 

After adding all attributes, press  Select All button from each attribute setting to add all its available variations at once. After adding product attribute variations, save settings selecting Save Attributes Buttons.  

Now get into Variations tab. Click on Add Variation dropdown. Here two options comes up. First one is Add Variation and the second one is Create variations from all attributes. 

Select  Create variations from all attributes and Press Go. It'll add all available variations combination created for attributes. Add price and variation image for individual variation and save the settings. 

How To Enable Variation Swatches on Existing Variable Products

If it needs to activate image, color and label swatches on existing variable products, you can give a go from here. Check the following screenshot. The default variation select dropdown currently looks like the following screenshot in your site. In coming step, the variation select field would be turned into swatches 

Step 01: Editing Attribute

Head to the Products >> Attributes. All existing global attributes are listed in attribute section. After installing WooCommerce Variation Swatches plugin, it adds Type field. By default it would show select under Type title.

As WooCommerce Swatches Plugin comes with Three attribute types: Color, Image, Button. You can set any of attribute type for your desired attribute.
For demonstration purpose, Fabrics, Pattern and Label attribute has been created. Add Color attribute type for Pattern attribute, Image attribute type for Fabrics attribute and Button attribute type for Label Attribute.

To set color attribute type to Pattern attribute, click on Edit.

Select  Color Type from the type dropdown.

Get back  Products >> Attributes. Edit Fabrics attribute like Pattern attribute.

Get back  Products >> Attributes again. Edit Label attribute like Pattern and Fabrics attribute.

When attribute type selection is completed, get back to the attribute list page. The Attribute list look like the following image.

The frontend of the product product would look like the following screenshot after selecting attribute types for product attributes.

Variations for Label attribute looks fine, but variations for Pattern attribute needs to define colors and variations for Fabrics attribute needs to add images.

Step 02: Editing Variations

To define colors as variations inside the Pattern attribute. Head over to Products >> Attributes. Select Configure terms from Patterns attribute.

After selecting Configure terms, a list of attribute variations comes up. For Pattern, three variations: Blue, Green, and Red variations are listed here. Edit each variation one by one to add variation color. For demonstration, select Edit link for Green variation.

From variation edit panel. Select desired color from Colorpicker and update the changes pressing Update button.

When all variations colors are updated successfully, the frontend look likes the following.

After updating pattern attribute variations, edit Fabrics attribute selecting Configure terms like pattern attribute.

After pressing Configure terms a list of Fabrics term comes up like pattern. Edit each variation to insert variations image. For demonstration purpose, Edit link for Chambray attribute.
From variation edit panel. upload desired variation image from image and update the changes pressing Update button.

After updating images for all variations, the frontend would like this the following screenshot