Variation Swatches for WooCommerce



WooCommerce Variation Swatches plugin enables you to convert default WooCommerce product attribute drop-downs into stylish swatches. This fantastic plugin helps you exhibit product variants (based on color, size, texture, etc.) in style, assisting customers to choose their preferred variant quickly.

You can create swatches of 4 types to display the product attributes, namely color, image,Radio and label with an option to display in square or circle icon. Also show the attribute’s term name as a tooltip when someone hovers over a swatch.

The smooth transition and look of swatches will give you an added advantage in achieving your sales goals.

Try the Demo | Documents | Pro Version

☞ Instantly convert attributes into swatches

You can convert default woocommerce variation drop-downs into variation swatches instantly with a single click if you want to convert it altogether.

☞ 4 Different Swatch Types

With the variation swatches plugin, you can create swatches of four types,
1. Image Variation
2. Color Variation
3. Label/Button Variation
4. Radio Variation

☞ Swatch Designs

This unique feature of the Variation swatches plugin lets you create multiple design types for an attribute and switch between them easily. For each design type, you can define the icon details, customize the hover & border details, style the tooltip details, and much more.

☞ Choose selection style

The variation swatches plugin lets you highlight the selected swatch with a checkmark. Also, you can customize the checkmark with an apt color and suitable size.

☞ Display behavior of unavailable and out-of-stock variants

Set the unavailable and out-of-stock variant’s swatches with three custom options –
1. Hide
2. Blur
3. Blur with a cross

☞ Swatches for Custom Product Attributes

This feature enables you to set up swatches for custom product attributes of variable products. You can customize these custom attributes with the three swatch types and their properties.

☞ Tooltips for Variation Swatches

Show the term name of attributes as tooltips with a custom display color when someone hovers over a swatch icon.

☞ Round and Square Attribute Variation Swatch

The Variation Swatches plugin lets you choose between round or square icons for your product variation swatches. So, based on your store theme, the suitable icon shape can be chosen.

☞ Display Selected Variation Name

Using this Variation Swatches plugin, you can display the chosen variation name besides the attribute label.

☞ Customize Swatches

The plugin provides you various customization options like editing font size, background color, icon height, icon width, etc as per your requirements.

☞ Enable Lazy Load

Enabling the lazy load option of the plugin helps you to speed up the page loading and improves the performance of your store.

☞ Show swatches as dropdown

This unique feature of the plugin lets you display both the image and color swatches as a simple dropdown. From this color or image swatch dropdown, the shoppers can search and find the corresponding term.

☞ Enable Swatches in Additional Info

Using the variation swatches plugin, you can show the additional info as image or color swatches even for the simple product.

☞ Set AJAX Variation Threshold

The plugin allows you to set the Ajax variation threshold value. So, based on this threshold value, the product availability check can be done through Ajax method or JavaScript.

☞ Clear Selection on Reselection

This feature of the plugin lets the users clear the selection that they have made by reselecting the same one.

See how these features works!

☞ Other Features

  • Create swatches for both globally and locally added terms.
  • Control AJAX variation threshold.
  • Compatible with most of the quick view plugins including yith.
  • Set border color for ‘selected’ and ‘hover’ of swatches.
  • Disable variation swatches plugin stylesheet to apply a theme default style.
  • You can enable or disable ‘Clear selection on reselection’ option.
  • Compatible with most popular plugins and themes.
  • Supports additional CSS.

💎💎 Premium Features

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!

Check out the demo for a more detailed overview of the features.

🔗 Live Demo

☞ Add Multiple Swatch Design

Swatch Design is a unique feature that allows you to create multiple design types for any attribute swatches by styling the icon details, tooltip, hover and border details, etc. So, even for a single website, several design types can be created.

☞ Swatch Display Options

Swatches can be displayed in five different ways besides the default style: Dropdown, Slider, Accordion, Horizontal Scroller, and Vertical Scroller.

☞ 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.

☞ Default Swatches to Variation Image Swatches

The Variation Swatches plugin lets you convert the product variation selection dropdown into variation image swatches in a single click.

☞ 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 WordPress theme and product pages.

☞ Bicolor Swatches

Display dual colored products with a bicolor swatch just like a color swatch instead 2 colors appear inside the icon.

☞ Out of Stock Styling

The “Out of Stock” text, which is the default behavioral style, is used to notify any out-of-stock variant. In addition to the default style other behavioral styles like Blur, Blur with Cross, Blur with Cancel, and Hide are available.

☞ 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.

☞ Get Product Variations as URL

Option to create product variation links for quick purchase.

☞ Display attributes as swatches

The Variation Swatches plugin lets you display attributes as swatches on filter widgets.

☞ 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. Also, you can set the minimum value for receiving the stock left alert.

☞ Search Option for Swatch Designs & Attributes

Both the swatch designs and attributes section includes a search option that lets you find any specific design or attribute in no time.

☞ Display Swatches on Cart & Checkout

Display the chosen image and color variations in a swatch form on the cart and checkout page.

Explore the complete features by visiting the Variation Swatches for WooCommerce plugin’s official page.

Check how it works (Live Demo)

Why ThemeHigh

Frequent updates are made to improve the plugin with a talented group of developers. Moreover, the dedicated support team will help you set up and customize your dream store with all available features and hooks.

🏆 2 Million+ Customers
🏆 Quickest Turn-around Support
🏆 Most Lightweight Plugins

See a few reviews below;

jackofallspades (@jackofallspades) ⭐⭐⭐⭐⭐
I’m trying something about 10 plugins, and this one is the best. Best functionality, smooth animation and excellent support. Thank you!

francescol (@francescol) ⭐⭐⭐⭐⭐
Great plugin! I needed a help with some issue but the support it was very excellent. 5 stars you really deserve.

amrankalpaka (@amrankalpaka) ⭐⭐⭐⭐⭐
They have excellent features for variation swatches. Great work!

For more info on ThemeHigh and Variation Swatches for WooCommerce plugin in specific, check out the following:


  • Color swatch preview
  • Image swatch preview
  • Label swatch preview
  • Behaviour for unavailable and out of stock variation
  • Term name tooltip preview
  • Swatches Design types
  • Attribute styling
  • Swatch type styling
  • Tooltip styling
  • Hover and Border styling
  • Global settings
  • Global color variation attribute list preview
  • Global image variation attribute list preview
  • Checkmark with Border
  • Swatches on Additional Info
  • Swatches as Dropdown


Minimum Requirements

  • WooCommerce 4.0 or greater
  • WordPress 5.3 or greater
  • PHP 7.0 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?

Yes, Under the edit products option you can set swatches for local attributes in Swatches Settings Tab.

How to set up different styles for different swatches?

  • Navigate to Dashboard → Products → Swatches Options
  • Select Swatches Design tab
  • Choose any of the designs and you can customize the attribute styling, hover and border styling, tooltip styling, and swatch type specific styling.
  • Note: The plugin’s free version only provides 4 swatches designs, whereas the Premium version lets you add as many as you like.

  • Once you’ve done styling Swatches Design, go to Product Attributes
  • Select any attribute, and from the ‘Design Type’ dropdown menu, select the design you styled.

How to set up different selection styles/ checkmark styles for swatches?

  • Select a design from the Swatches Design tab.
  • Click on the ‘Hover and Border Styling’ option, and then under Selection Style choose a swatch selection style you prefer.
  • Set the size and color of the tick if the chosen style is ‘Checkmark with border’

What else to do if swatches do not work on particular pages/pages created with the builder?

Please add the below filter in your child theme’s functions.php

add_filter(‘thwvsf_enqueue_public_scripts', ‘enqueue_public_script’);
function  enque_public_script(){
    if(is_page (Page Id) {
     return true;

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.


September 29, 2022
We've had a problem with the view of unavailable variations. The developers asked for access to the site, checked the problem and informed us of the solution. Thank you.
September 21, 2022
You can better style your variation selections.
September 20, 2022
This support is so useful and amazing they have been worked during several days for help me and my subject is solved. Again, thank you so much!!
Read all 47 reviews

Contributors & Developers

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


“Variation Swatches for WooCommerce” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “Variation Swatches for WooCommerce” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.




  • Added a new feature to allow users to import and export variation swatches along with WooCommerce default product import-export.
  • Added WooCommerce 6.6 compatibility.


  • Added WooCommerce 6.5.1 compatibility.
  • Added WordPress 6.0 compatibility.


  • Added WooCommerce 6.3.1 compatibility.
  • Added filter for variation separator.
  • Added REST API support.


  • Added swatches on the additional info tab for simple products.
  • Added WooCommerce 6.1.0 compatibility.
  • Added lazy loading for image swatch type.
  • Added swatches as a dropdown feature.


  • Added an option for displaying the swatches in the Additional information tab.


  • Added WPC Smart Quick View for woocommerce by WPClever compatibility.


  • Fixed the issue of out-of-stock behavior of default selected variations.
  • Fixed the issue of selected attribute labels not shown for default selected variations.
  • Added WooCommerce 5.9.0 compatibility.
  • Added new selection styles for color, image and label swatches.


  • Fixed the Flatsome quick view issue.
  • Added Radio button as a new variation swatch type.
  • Added WooCommerce 5.6.0 compatibility.
  • Added WordPress 5.8 compatibility.


  • Added product attributes tab in the Swatches Options settings.
  • Added terms settings option in the product attributes tab.
  • Added an option to show the selected variation name beside the attribute label.
  • Added WooCommerce version – 5.4.1 compatibility.


  • Fixed issue in the Custom Attribute Settings


  • Settings screen UI improved.
  • Added Swatches Designs feature to create multiple sets of swatch designs and assign the same to individual attributes.
  • WooCommmerce 5.2.2 compatibility added.


  • Fixed issue of custom attribute tab expanding for multiple word attribute.
  • Fixed the Attribute link used in the local attribute area.
  • Fixed issue default variation selection while loading the page for local attributes.
  • Removed multiple id used in the plugin.
  • Added OceanWP quick view compatibility.
  • Improved the last active tab opened in the admin settings.
  • WordPress 5.6 style issue corrected for buttons.
  • WooCommerce 4.8.0 compatibility added.


  • Added missing alt attribute to all image tag used in the plugin.
  • WooCommmerce 4.7.0 compatibility added.


  • Settings screen UI improved.
  • New option to easily convert all the default swatches to label swatches.
  • New label specific settings.
  • New options to style active and hover behaviour for a variation
  • New options to set out of stock behaviour.
  • Added Ajax threshold settings.
  • Added clear on reselect settings.
  • Added option for disabling the plugin style sheet.
  • Added option for adding swatches type the local attributes in the single product page.
  • WooCommmerce 4.5.2 compatibility added.


  • 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 bundled 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