The Variation Swatches module allows you to display your product variations as professional-looking swatches on your WooCommerce product and catalog pages.
This module enables you to group your product attributes into four types (select, color, image, button). Then, it shows each attribute type as a visually distinct variation swatch in your WooCommerce store.
If you have any variable products in your shop, you can take your store design to the next level with the Variation Swatches module, as every aspect of each swatch type is easily customizable to enable you to create an engaging brand image.
In the screenshot below, you can see Merchant Pro’s four variation swatch types on a WooCommerce product page (for the example website, we used the Jewelry demo of our Botiga WooCommerce theme):
For the comparison, here’s what the same product variations look like without Merchant Pro, using just WooCommerce’s default options — as you can see below, it provides a much less engaging user experience:
Now let’s see how to configure and enable Merchant Pro’s Variation Swatches module in your WooCommerce store.
IMPORTANT: This module only works for variable products that have at least two product variations.
1. Open the Variation Swatches Module
First, open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.
Find the Improve Experience section, and click the Variation Swatches module to open its settings page:
2. Configure the Module’s Settings
On the admin page of the Variation Swatches module, you’ll find five groups of settings — we recommend that you review and configure each option before activating the module:
- Settings – This group of settings lets you define where and how you want to show the variation swatches on your site.
- ‘Select’ Swatch Style – Here, you can customize the design of your select swatches.
- ‘Color’ Swatch Style – Here, you can customize the design of your color swatches.
- ‘Button’ Swatch Style – Here, you can customize the design of your button swatches.
- ‘Image’ Swatch Style – Here, you can customize the design of your image swatches.
Optionally, you can use different style settings for your single product and shop archive (catalog) pages — however, you can also make the shop archive pages inherit the style settings of the single product pages (you can define a different inheritance rule for each variation swatch type):
Once you’ve configured all the settings, click the Save button in the top-right corner of the page.
3. Enable the Variation Swatches Module
To activate the module, click the Enable button at the top of the page:
4. Create New Product Attributes
Once the Variation Swatches module is activated on your WordPress site, a new Type option will appear on your Products > Attributes WooCommerce admin page.
Create all the attributes you want to use in your store, then click the Configure terms option below each attribute to add the belonging values (e.g. in the below screenshot, the values for the Color attribute are Bronze and Silver):
5. Add the Product Variations to Your Variable Products
Now, you need to apply the attributes to your variable products.
Click the Products > All Products menu in the left sidebar of your WordPress admin area, and open the product you want to create the variations for.
On the product’s admin page, scroll down to the Product data section (it needs to be set to Variable product), open the Attributes tab, and add all the attributes and values you want to show for the product. Finally, click the Save attributes button:
Then, click the Variations tab and set a price for each product variation you want to sell.
Once you’ve added all the variations, click the Save changes button that shows up below the options:
Finally, you need to update the WooCommerce product page.
To do so, scroll back to the top of the page, click the Preview changes button, and if your variation swatches look as expected, click the Update button to make the changes live:
