Variation Swatches for WooCommerce


Let your prospects choose product variants in an attractive way!

Instead of drop-down variations, let prospects choose variations in the form of radio buttons with color, text or image swatches.

Simply set the swatches for your desired attributes with the appropriate color, image or labels, and the plugin will do the rest.

Why Use Variation Swatches For WooCommerce?

Along with a user-friendly and easy-to-use interface, this plugin has exclusive features such as:

Auto-Convert Variation Dropdowns To Button Swatch

Variation Swatches For WooCommerce will automatically change the default drop-down display of all product variations into swatches.

No need to manually change for every product one by one.

Set Round or Squared Swatches

You may choose to display variation swatches in Rounded shape or Squared shape.

Types Of Variation Swatches

You can have 3 types of variation swatches:

  • Color Variation Swatch
  • Image Variation Swatch
  • Label Variation Swatch

Color Variation Swatch

A prospect will get a visual of the colors available in the form of radio buttons.

This will help them make accurate selections.

This is a great feature if you have a product with different colors.

Image Variation Swatch

You may present the variations of your variable products in the form of small images to choose from, thus making the prospects’ selection more intuitive.

Label Variation Swatch

Set text labels as swatches on your variable products for your customers to choose from.

This feature is very useful if you have different sizes of the same product, or different materials for the product, or any custom variation factors.


  • Control Product Page Swatches Size
  • Choose Swatch shape – Round or Square
  • Customize swatch color and background color
  • Customize swatch border size and styling
  • Variable product quick view pop-up
  • Set Tooltip with customized text, size, and background color
  • Show cross sign for out of stock variable products
  • Enable Disable AJAX variation

Premium Features:

  • All the free features
  • Variation clear button display settings
  • Both rounded and squared swatches on the same product page
  • All colors, Image, and button swatches type in the same attribute

Upcoming Features:

  • Hide / blur out of stock variation swatches
  • Archive page swatches alignment and positioning
  • Control swatches size on the shop page
  • Multi-color variation swatches
  • Tooltip display settings on the archive/shop page 
  • And many more

How it works?

To start using the plugin, follow the instructions below to use it’s features:

Step 1 –

  1. Go to Dashboard > Swatches.
  2. Here, go to the Controls menu on the left.
  3. Turn on the option ‘Dorpdowns To Button Swatch’

Step 2 –

For existing global attributes

  1. Go to Dashboard > Products > Attributes.
  2. Click on an existing attribute name to edit it.
  3. Here you will find a dropdown selection for Types.
  4. Choose the Color, Image or Label as you require
  5. Click on Update.

When adding a new attribute

  1. Fill out the all the fields
  2. You will find a dropdown selection for Types.
  3. Choose the Color, Image or Label as you require
  4. Click on Add attribute.

Step 3 –

  1. On the right side of an existing attribute, click on Configure terms.
  2. When adding a new term, assign Color, text or image below and the Add it.
  3. For existing term, click on a term to edit it.
  4. Below, assign Color, text or image below and the Update it.

Privacy Policy

Variation Swatches for WooCommerce uses Appsero SDK to collect some telemetry data upon user’s confirmation. This helps us to troubleshoot problems faster & make product improvements.

Appsero SDK does not gather any data by default. The SDK only starts gathering basic telemetry data when a user allows it via the admin notice. We collect the data to ensure great user experience for all our users.

Integrating Appsero SDK DOES NOT IMMEDIATELY start gathering data, without confirmation from users in any case.

Learn more how Appsero collects and uses this data.


  • Convert the variation options from the dropdown to button swatches in just a few clicks
  • Variations on frontend
  • General Settings
  • Swatches Global Style
  • Swatches Hover Style 6 Swatches Selected Style
  • Controls


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.

  1. Go to Dashboard > Plugins and click on the Add New button at the top.
  2. In the search field, search for “Variation Swatches for WooCommerce”
  3. Find the plugin. Install and Activate it.
  4. Once activated, you will find a new Swatches menu under the Dashboard menus.

Manual Installation

  1. Download the Variation Swatches for WooCommerce plugin to your desktop.
  2. Extract the plugin folder to your desktop.
  3. Read through the “readme” file thoroughly to ensure you follow the installation instructions.
  4. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory online.
  5. Go to Plugins screen and find the “Variation Swatches for WooCommerce” in the list.
  6. Click Activate to activate it.


Even this plugin has been installed and activated on your site, variable products will still show dropdowns if you’ve not configured product attributes.

  1. Log in to your WordPress dashboard, navigate to the Products menu and click Attributes.
  2. Click to attribute name to edit an exists attribute or in the Add New Attribute form you will see the default Type selector.
  3. Click to that Type selector to change attribute’s type. Besides default options Select and Text, there are more 3 options Color, Image, Label to choose.
  4. Select the suitable type for your attribute and click Save Change/Add attribute
  5. Go back to manage attributes screen. Click the cog icon on the right side of attribute to start editing terms.
  6. Start adding new terms or editing exists terms. There is will be a new option at the end of form that let you choose the color, upload image or type the label for those terms.


Will this plugin work with my theme?

Yes, it will work with any theme, but may require some styling to make it match nicely.


Read all 2 reviews

Contributors & Developers

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



1.4.6 (02, Aug 2021)

  • Issue Fixed: Fixed Issue For Tooltip Breakpoint in Swatches

1.4.5 (15, July 2021)

  • Compatibility check: WooCommerce 5.5.1

1.4.4 (04, May 2021)

  • Update: Added Preloader on Admin Panel
  • Fixed: Fixed Fatal error while Activating the plugin

1.4.3 (22, March 2021)

  • Update: Added Placeholder text
  • Compatible: WP 5.7 Support

1.4.2 (10, MARCH 2021)

  • Update: Improvement on Plugin Interface

1.4.1 (25, February 2021)

  • Update: Translations

1.4.0 (24, DECEMBER 2020)

  • Bug fix: Style issue fixed
  • Bug fix: Backend UI issue fixed
  • Quick view support added
  • WP 5.6 compatible
  • WC 4.8.0 compatible
  • Translations update

1.3.0 (28, SEPTEMBER 2020)

  • Bug fix: delete data when plugins uninstalled
  • WP 5.5.1 compatible
  • WC 4.5.2 compatible
  • Translations update

1.2.0 (11, june 2020)

  • WooCommerce 4.2.0 Compatible
  • Added: Out of stock product “Crossed” option


  • WooCommerce 4.0.0 Compatible
  • Image type attribute hover effect added
  • Image type attribute selection effect added


  • Initial release.