Pro Variation Swatches

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):

Frontend view of Merchant Pro's all product swatch types on a WooCommerce product page

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:

Frontend view of WooCommerce's product variations without Merchant Pro

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:

Location of the Product Swatches module on the Merchant dashboard

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:

  1. Settings – This group of settings lets you define where and how you want to show the variation swatches on your site.
  2. ‘Select’ Swatch Style – Here, you can customize the design of your select swatches.
  3. ‘Color’ Swatch Style – Here, you can customize the design of your color swatches.
  4. ‘Button’ Swatch Style – Here, you can customize the design of your button swatches.
  5. ‘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):

Settings of Merchant Pro's Product Swatches module, annotated screenshot

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:

Location of the Enable button on the Product Swatches module's Settings page, annotated screenshot

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:

Location of the Attributes tab in the admin screen of a WooCommerce product page, annotated screenshot

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:

Location of the Variations tab in the admin screen of a WooCommerce product page, annotated screenshot

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:

Location of the Preview changes and Update buttons on a WooCommerce product page, annotated screenshot