Product Variation Swatches For WooCommerce is an extension for your WooCommerce store. This plugin provides a blend of multiple variation options to display products to customers in a more delightful and comprehensive manner. Use of variation swatches to display product variations like colors, sizes, and images enhance the customers’ buying experience by building trust and confidence.


Product Variation Swatches For WooCommerce Offers Following Key Features:

  • Display Swatches On Shop/Archive And Category Page.
  • Display Swatches On Related Products.
  • Display Show/Hide Variation Button Instead Of Showing The Swatches Directly.
  • Set Multiple Images For Every Variation Of The Product.
  • Slider Feature For Variation Image Gallery.
  • Show Term Label For Selected Variation.
  • Show Border Around Selected Swatch.
  • Different Display Type For Variations Available.
  • Different Display Size For Variations Available.
  • Change The Display Settings For Swatches Globally Or For Products Individually.
  • Variation Feature Image As The Swatch Image.
  • Hide/Show Add To Cart Button On Shop/Category Page.
  • Hide/Show Add To Cart Button On Related Products.
  • Show Single Attribute On Shop.
  • Show Product Gallery In Two Ways – In Bottom Or In Left Side
  • Import/Export Variation Gallery Images.
  • Import/Export Attribute Terms.


2.1.Automatic Installation

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t need to leave your web browser.

Steps are as follows:

In order to get your purchased plugin use these steps:

  1.  After completing your plugin purchase, Go To My Account. [Use this link https://makewebbetter.com/my-account/downloads/ to review your account].
  2. From My Account, go to the “Download” section. [Here you can easily find all your purchased plugins].
  3. Click on the “Download” button present across your purchased plugin to download your extension.
  4. Now Login to your WordPress Dashboard.
  5. From the sidebar click on Plugins.
  6. Click on Add New and then upload your purchased plugin.
  7. Click the Browse button. Choose your downloaded plugin’s .zip file, and click on Install.
  8. Now click on the Activate link.
  9. You’re all set to use your plugin and take advantage of it!

Note: To create your account before completing your purchase visit the Login Page.

2.2.Manual Installation

The manual installation of the plugin is another option to connect the plugin to your WordPress-environment. The manual installation method involves downloading our “Product Variation Swatches For WooCommerce” extension and uploading it to your web server via your favourite FTP application.

Steps are as follows:

  1. Upload “Product Variation Swatches For WooCommerce” folder to “the/wp-content/plugins” directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.

3.Products & Attributes

This plugin replaces default variation selection of product type with attribute term swatches.

Let’s see how it proceeds with step-by-step application of each setting.

3.1. Global Attributes

First, create Global Attributes. Navigate to sidebar, click on Products > Attribute, here you can create a new attribute and/or modify/delete existing attributes.

To create a new attribute fill out the required fields-

  • Name
  • Slug
  • Default sort order

 When done with the details, click on the “Add Attribute” tab.

product variation swatches

After successfully creating an Attribute, configure Attribute terms by clicking on “Configure Terms” for the particular Attribute.

product variation swatches

To configure the terms,enter the Term Name, Term Slug, Description and Select the Display Type. This plugin provides three variants for display type,i.e., Image, Text, and Color.

product variation swatches

Done with filling in the details, Click on the “Add New <Attribute Term>”. Your configured Terms are successfully created.

product variation swatches

To edit the Configure Term created, Select the Configure Term and click on “Edit” option. Enter the data in the specified fields and click the “Update” button to save the changes.

product variation swatches

Now,  You can add multiple ‘Attributes’ and ‘Attributes Terms’ according to your requirements.

After successfully creating attributes, you have to enable the plugin settings.

4.Variation Swatches

Go to the dashboard, click on ‘Product Variation swatches for WooCommerce’. The plugin settings dashboard will open on your screen. Here you’ll see three settings options

  1. Global Settings
  2. Gallery Settings
  3. Import/Export Settings

By default, firstly, “Global Settings” tab will open up.

4.1.Global Settings

4.1.1.Enable & Show Swatches

Firstly, enable the “Enable Swatches” and “Show Swatches in Shop/Archive/Category Page” settings to display the swatches on the Shop page and/or category page.

product variation swatches

The swatches once enabled will be displayed as follows on shop/category and archive page: 

product variation swatches


4.1.2.Attribute Terms Thumbnails

To show the thumbnails for attribute terms, Enable the setting, “Use Attributes Terms Thumbnails”.

product variation swatches

Once this setting is enabled, the shop page will look like the below image:

product variation swatches

4.1.4.Show Variation Button

Enable this setting to show the “Show Variation” button on the product page instead of showing variations directly.

product variation swatches
product variation swatches
product variationswatches

4.1.5.Attribute Term Label & Border On Swatches

To show the label and border on each Attribute Term, enable the following two settings “Show Attribute Term Label” and “Display border on selected swatch” for Term Label and Term Border respectively.

product variation swatches

These setting when enabled will show the following results:

product variation swatches

4.1.8.Add To Cart & Quantity Button On Shop/Category Page

Enable this setting to hide the Add To Cart & Quantity Button and disable to show both the buttons on the shop/category page.

product variation swatches
product variation swatches

4.1.11.Single Attribute On Shop Page

Enable this setting to show only one attribute on the shop page.

product variation swatches
product variation swatches

4.1.12.Attribute Thumbnail Display

Enable the setting “Attributes Terms Thumbnails Display Type” to adjust the attribute thumbnail display type like circle, square, etc.

product variation swatches

Enable the setting “Attributes Terms Thumbnails Display Size for Product Detail Page” to adjust the attribute thumbnail size on product page and setting “Attributes Terms Thumbnails Display Type for Shop/Archive/Category Page” to adjust the size of the attribute term thumbnail on Shop/category page.

profduct variation swatches

4.1.13.Product-Wise Variation Swatches

To enable the variation swatches product-wise, go to the product edit page on which you want to apply the per product setting. Firstly, add the attributes and their values by clicking on the ‘Attribute‘ tab.

product variation swatches

And then click on the “Variation Swatches” tab below the “Advanced” tab. From here, the admin can –

  • Disable the swatches for this variable product.
  • Change the label name for each attribute.
  • Select the display types to show attribute terms.
  • Text/color/Image
  • Default Global Select
  • Select the display size of attribute swatches.
  • Predefined Size
  • Default Global Size
  • Custom Size
  • Hide the term display name.
  • Using attribute term (global) for each term
product variation swatches

Now click on the Display Type Image/Color/Text, select Display Name ‘Yes’ from the dropdown list and select the Display Size of attributes.

product variation swatches

Now click on attribute terms, Here set the Display Type and related display settings of attributes.

Ensure to follow the same settings for all the attribute terms.

product variation swatches

Now you can see the per product variation swatches of the product.

product variation swatches Settings

Suggest Edit