How To Setup WooCommerce Variation Swatches To Convert Variations Select Dropdown Into Color, Image & Button Swatches
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.
- Setup Variation Swatches for new variable products
- 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 Variation Swatches For WooCommerce. Install & Activate the first plugin. Check the following screenshot.
Download WooCommerce Variation Swatches Plugin Now
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.
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.
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.
