The Variation Swatches is a very useful tool that belongs to an online shop. It displays the availability of the product in different shapes or colors, with different prices. To activate variation swatches, go to Settings > Sparks in your admin dashboard. The swatches are shown in colored dots, corresponding to the color attributes.
The default style for variable WooCommerce products is a drop-down choice.
Adding Variation Swatches #
To start configuring the module, navigate ton your admin dashboard to Products > Attributes and create a global attribute, for example, Color.
This article will focus on the Color attribute, so follow the steps below in order to create and use one:
Step 1 #
Set a suggestive name for the attribute, that will appear on the website ( such as “Color” ), and choose an attribute type ( color, image, label ).
Don’t forget to click on the Add attribute button.
Step 2 #
You will notice in the right side table that the attribute that you have created is now available for configurations. Click on the configure terms button, to start adding colors.
Step 3 #
A panel like will appear. Set a name of the color ( eg. blue ) and pick the corresponding color from the Color setting.
You can add multiple options there and you will find them in the table.
Once you got here, the attribute has been set and it’s time to use them as variations for the WooCommerce Products.
Step 4 #
Navigate to Products ( 1 ) and pick the desired one. Into the Product data space select the Variable product option ( 2 ) from the dropdown list. Select the Attributes panel ( 3 ) and make sure you check the Used for variations option ( 4 ), to enable them.
Step 5 #
Before saving the attributes, you will have to add the values that you have created ( not necessarily all of them ).
Step 6 #
Navigate to Variations, click on the Go button. For each value inserted, configure the price and the specifications.
The variation swatches should now appear and work on your single product page.
Variation Swatches on the Shop Page #
It’s also possible to enable the variation swatches on the product archive pages, there are two settings for it.
Step 1: Navigate on your admin dashboard to Products > Attributes, hover over the attribute, and click on the Edit button.
This way, it can be specified for each attribute if it should appear on the products archives pages or not.
Step 2: Then check the Enable archives checkbox.
Step 3: Navigate to Global Appearance > Customizer > WooCommerce > Product Catalog. Under the Product Card, make sure the Add to cart is also enabled on the product archive pages and it’s also set to appear below the product thumbnail ( and not in front of it with the hovering effect ).
Step 4: In the same set of Customizer settings with the add-to-cart button, there is also a toggle that needs to be enabled to show the variation swatches on the product archive pages.
Sync Variation Swatches with the Product Featured Image #
For a better user experience, it is possible to sync the variation swatches with the product’s featured image. For example, if we have a Book product available in three different colors, each variation can be associated with a product image. This way, a different image will be shown based on the selected variation.
This can be configured while editing the product.
Step 1: Navigate to the product, into the Variations tab.
Step 2: Expand each color and upload a specific photo for each color.
