Want to show product variations as clear, tappable swatches instead of a plain dropdown? The Variation Swatches module in Merchant Pro displays your product variations as professional-looking swatches on your WooCommerce product and catalog pages.
In this guide, we’ll walk you through how to set up and enable the Variation Swatches module in Merchant Pro.
Before you get started, make sure you’ve installed and activated the Merchant plugin on your WordPress site. If you’re using premium modules, ensure you have Merchant Pro installed and active. This feature requires Merchant Pro.
This module groups your product attributes into four types (select, color, image, and button), then shows each attribute type as a visually distinct swatch in your store. If you sell variable products, every aspect of each swatch type is customizable, so you can create an engaging brand image.
In the screenshot below, you can see the four variation swatch types on a WooCommerce product page. For the example website, we used the Jewelry demo of our Botiga WooCommerce theme:
For comparison, here’s what the same product variations look like without Merchant Pro, using just WooCommerce’s default options. As you can see, it’s a much less engaging experience:
Important: This module only works for variable products that have at least two product variations.
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, then click the Variation Swatches module to open its settings page:
Configure the module’s settings
On the admin page of the Variation Swatches module, you’ll find five groups of settings. We recommend you review and configure each option before activating the module:
- Settings – Define where and how you want to show the variation swatches on your site.
- ‘Select’ Swatch Style – Customize the design of your select swatches.
- ‘Color’ Swatch Style – Customize the design of your color swatches.
- ‘Button’ Swatch Style – Customize the design of your button swatches.
- ‘Image’ Swatch Style – Customize the design of your image swatches.
Optionally, use different style settings for your single product and shop archive (catalog) pages. You can also make the shop archive pages inherit the style settings of the single product pages, and set 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.
Enable the module
To activate the module, click the Enable button at the top of the page:
Create new product attributes
Once the Variation Swatches module is activated, a new Type option appears 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 its values. For example, in the screenshot below, the values for the Color attribute are Bronze and Silver:
Add product variations to your variable products
Now, apply the attributes to your variable products. Click the Products » All Products menu in the left sidebar of your WordPress admin area, then 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. Then 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, update the WooCommerce product page. 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:
Frequently asked questions
Below, we’ve answered some of the most common questions about the Variation Swatches module in Merchant Pro.
What swatch types can I use?
You can use four types: select, color, image, and button. Each attribute is assigned a type, and you can style each type separately.
Does this work on simple products?
No. The module only works on variable products that have at least two product variations.
Can shop pages use different swatch styles than product pages?
Yes. Set different styles for single product and shop archive pages, or have the shop archive pages inherit the single product styles, with a separate inheritance rule per swatch type.
That’s it! You’ve successfully set up and enabled the Variation Swatches module in Merchant Pro to show your product variations as clear, styled swatches.
Next, would you like to let shoppers preview products faster? Check out our guide on Quick View to learn more.
