Variation Swatches for WooCommerce



WooCommerce Variation Swatches lets you add variation swatches for variable product attributes in your WooCommerce online store. The plugin allows you to customize the height, width, and shape of the swatch icons.

The WooCommerce Variation Swatches plugin is made to provide the shoppers with an out-and-out overview of the variations available for products (say, color, size, texture, etc.) in your WooCommerce store through swatches. With the plugin, you can display your variations with color, image, and label swatches.

Display tooltips for the swatches while hovering. You can change the font color and background color of the tooltip.

Key Features

  • 3 Swatch Types:
    With Product Variation Swatches for WooCommerce(Variation Swatches for WooCommerce), the product variations can be displayed as label, color and image swatches.

  • Customization:
    The swatches icons and labels/buttons can be customized for their height and width. You can select between a round or square shape for the icon.

  • Behavior of unavailable variation swatches:
    The swatches with variations for a product in the WooCommerce store that are not available will be blurred with a crossed mark.

  • Tooltip:
    Display the term name as a tooltip while hovering on the swatch.

  • Swatches for Local Terms:
    You can add swatches for both globally and locally added terms.

Upgrade to Premium

The premium version of the Variation Swatches for WooCommerce comes with a handful of extra features for swatches display.

With the extra features and customizations, your variation swatches can get along with any WooCommerce theme you use.

Upgrade to Premium Now!

Live Demo – Front End
Live Demo – Back End

Documentation, Support

Features of Premium Version

  • An Extra Swatch Option – Radio:
    The premium version of the swatches plugin for WooCommerce allows you to display your product attributes in the form of Radio buttons.

  • Individual Attribute Settings:
    With individual attribute settings, you can override the global settings for individual swatches.

  • Additional Tooltips:
    You can set an image, term name, or description as a tooltip for swatches.

  • Separate Style Customization:
    Custom styling can be done for individual swatches with the premium version of the plugin. You can style the icon height, width, and roundness, and also the border color, color on hover and color on selected.

  • Extra Styling for Tooltips:
    With options to display images and descriptions as tooltips, you also have options to style them according to your WooCommerce theme and product pages.

  • Out of Stock Label:
    Instead of hiding a variation, you can display an out of stock label to let your shopper know all the existing product variations.

  • Stock Left Alert:
    With a minimum stock left alert, you can call the attention of shoppers to the limited stock of any product in your WooCommerce store.

  • Swatches on Shop Page:
    By displaying variation swatches on your WooCommerce Shop page, make your shoppers quickly understand the variations which are available and which are not.

  • Stock Left Alert on Shop Page:
    Display the stock left on the WooCommerce shop page, so that the shoppers can grab products of limited numbers.

Upgrade to Premium Now!


  • Products > Swatches Options
  • Products > Attributes
  • Products > Attribute terms
  • Products local attributes
  • Product variation swatches


Minimum Requirements

  • WooCommerce 3.0 or greater
  • WordPress 4.9 or greater
  • PHP 7.2 or greater is recommended
  • MySQL 5.6 or greater is recommended

Automatic installation

  1. Log in to your WordPress dashboard.
  2. Navigate to the Plugins menu, and click « Add New ».
  3. Search and locate ‘Product variation swatches for WooCommerce’ plugin.
  4. Click ‘Install Now’, and WordPress will take it from there.

Manual installation

Manual installation method requires downloading the ‘Product variation swatches for WooCommerce’ plugin and uploading it to your web server via your FTP application. The WordPress codex contains instructions on how to do this here.


How to setup Swatches settings in Product Variation Swatches for WooCommerce?

  1. Navigate to Dashboard → Products → Swatches Options
  2. Under Swatches Options, navigate to Global Settings →Attribute Settings.
  3. Set properties for icon and label like shape, height & width.
  4. Save the changes to save the Swatches settings.

What is a tooltip for a swatch and how does this work in WooCommerce Variation Swatches?

The tooltip is used to set hover element for each term of an attribute/variation.

To set tooltip for swatches,

  1. Navigate to Swatches Options → Global Settings → Tooltip Settings.
  2. Enable the checkbox Enable tooltip.
  3. Save the changes.

Note: Free version will let you have Term name in the tooltip, you can have Image, description as well in the tooltip when using the Premium version of WooCommerce Product Variation Swatches

Where can I enter the term image/color/label in WooCommerce Variation Swatches?

  1. Navigate to Products → Attributes
  2. To add a New Attribute and then configure the term (image/color/label), follow steps 3-7. If you already have an attribute saved, you can skip the steps and directly go to step 6.
  3. Using Add New Attribute section add a new attribute. Fill in the desired attribute name.
  4. Choose the attribute type from the type drop down. You can choose between attribute type Color /Image /Label /Radio(available in Premium Version)
  5. Click on Add Attribute button to add the attribute.
  6. Once the attribute is added, you can now configure the Terms as per the attribute type selected for the attribute.
  7. Click on Configure Terms, you now add in the terms.
    • Attribute type Label – You will be asked to enter the Label Display Term Name along with default term data.
    • Attribute type Image – You will be asked to upload the term image along with default term data.
    • Attribute type Color – You will be asked to pick the term colour along with default term data.

Is there an option to set swatches for local attributes in WooCommerce Variation Swatches?

With our Premium version, you can set swatches for local attributes. Once installed, you can configure the same from the Product page.

Can I set an image as a tooltip?

With the free version of WooCommerce Variation Swatches, you only have the option to set term name as a tooltip. If you need Images as the tooltip, you have to Upgrade to Premium Version of WooCommerce Product Variation Swatches.

Is there an option to display the number of products left in the stock?

Upgrade to Premium version to display the number of products left in the stock. Stock left alert (min count) can also be set as per your preference when using WooCommerce Variation Swatches.


26 mai 2020
Using the free version. Easy to set up, looks amazing and works well. Thank you!
26 decembre 2019
For a free plugin the support is amazingly fast and professional. Highly professional developers and excellent plugin. Congratulations!
2 novembre 2019
Excellent features and a great support team. Satisfied 🙂
10 Agost 2019
I'm trying something about 10 plugins, and this one is the best. Best functionality, smooth animation and excellent support. Thank you!
Read all 10 reviews

Contributors & Developers

“Variation Swatches for WooCommerce” is open source software. The following people have contributed to this plugin.




  • WooCommmerce 4.3.0 compatibility added.


  • WooCommmerce 4.0.1 compatibility added.


  • WooCommmerce 3.9.1 compatibility added.


  • Added compatibility with WordPress 5.3.0 and WooCommmerce 3.8.0.
  • Added compatibility with OceanWP theme.
  • Added compatibility with Hestia theme.
  • Added Blur style for unavailable variation.
  • Added Compatibility with bundeled product plugin By
  • Fixed issue with Flatsome quick view.


  • WooCommerce compatible version updated.


  • WooCommerce version 3.6.1 compatibility added.


  • Swatch styles improved.


  • Initial Release