Variation Swatches for WooCommerce


Beautiful Color, Image and Buttons Variation Swatches For WooCommerce Product Attributes

How To Install Product Variation Swatches Plugin for WooCommerce Variable Products

Variation Swatches is easy to use WooCommerce product variation swatches plugin. It offers an aesthetic and professional experience to select attributes for variation products. It turns the product variation select options fields into radio images, colors, and label. It means with the help of this powerful WooCommerce color or image variation swatches plugin, you can show product variation items in images, colors, and label. So, you can say goodbye to dropdown product attribute fields.

Variation Swatches for WooCommerce not only offers the color, image and label attributes in the single WooCommerce product. It also enables them in product quick view. If you’re using WooCommerce themes like Flatsome that comes with default Quick View option, you don’t need to hassle to load color and image swatches for variable product attributes in quick view separately.

In the free WooCommerce attribute variation plugin, besides creating size, brand, image, color, and label variation swatches, you can handle the swatches shape style Rounded and Circle. On top of that, it allows you beautiful tooltips on variation swatch hover. Based on your requirement you enable and disable hover from the settings. To maximize and personalize your development process, the product attributes swatches comes an option to disable default plugin stylesheet so that you can personally write your own CSS.

Key Feature Comes with Variation Swatches For WooCommerce Plugin

👉 Auto Convert All Variation Dropdowns to Button Swatch by Default
Live Demo & Documentation

👉 Enable Color Swatches For Variable Product Attribute Variations
Live Demo & Documentation

👉 Enable Image Swatches For Variable Product Attribute Variations
Live Demo & Documentation

👉 Enable Label/Text/Button Swatches For Variable Product Attribute Variations
Live Demo & Documentation

👉 Convert Globally Created Attribute Variations Into Color, Image, and Label Swatches
Video Tutorial & Preview

👉 Option to Globally Select ROUNDED Attribute Variation Swatches Shape.
Live Demo & Documentation

👉 Option to Globally Select SQUARED Attribute Variation Swatches Shape.
Live Demo & Documentation

👉 Show Cross Sign For Out of Stock Variation Swatches (Up To 30 Variations)
Live Demo & Documentation

👉 Blur For Out of Stock Variation Swatches (Up To 30 Variations)
Live Demo & Documentation

👉 Hide For Out of Stock Variation Swatches (Up To 30 Variations)
Live Demo & Documentation

👉 Product Page Swatches Size Control
Live Demo & Documentation

👉 Show Selected Variation Name Beside Label
Live Demo & Documentation

👉 Flexible Swatches Tooltip Insert and Display settings
Live Demo & Documentation

👉 Convert Buttons Swatches to Dropdown (If It’s needed)
Live Demo & Documentation

👉 Compatible With Eelementor Page Builder Plugin
Video Demo & Documentation

👉 Compatible With Printful WooCommerce Plugin
Video Demo & Documentation

👉 Compatible With Dokan MultiVendor WooCommerce Plugin
Video Demo & Documentation

👉 Compatible With AliDropship WooCommerce Plugin
Video Demo & Documentation

👉 Reorder Product Attribute Variation Swatches
👉 Flexible Swatches Tooltip Insert and Display settings
👉 Work on Variable Product Quick View Popup
👉 Compatible with popular WooCommerce themes and plugins
👉 Frequently Updated And Secured Codebase
👉 Option to disable default plugin stylesheet for theme developer
👉 Compatible With Popular WooCommerce Plugins

🏆 Users’ Feedback For Variation Swatches For WooCommerce

Tim Cumming, Founder at DevisionUK:

‘Really can’t rate this developer high enough!

Not only is the plugin super cool but their support, is utterly mind-blowing! I had reason to ask a question and, without hesitation, Ahmed logged into our site, had a look around and responded with a solution, all within the space of 5 minutes!!

It you’re looking for a great product with superlative support then look no further!’

Ruben Zuidervaart:

‘It just works, and the support is also pretty damn good for something that they offer for free.

Leaving a 5/5 is the least I could do 🙂’


‘I like this plugin! Works great and the customer support is the best. Love it!’


Live Demo | Upgrade to PRO | Documentation | Support

How To Create Product Variation Swatches From Custom Product Level Attribute

👉 Auto Convert All Dropdowns to Image Swatch If Variation Has a Featured Image Set
Live Demo & Documentation

👉 Multi Color Variation Swatches
Live Demo & Documentation

👉 Show Entire Color, Image, Label And Radio Attributes Swatches In Catelog/ Category / Archive / Store/ Shop Pages
Live Demo & Documentation

👉 Show Selected Single Color or Image Or Label Attribute Swatches In Catelog/ Category / Archive / Store / Shop Pages
Live Demo & Documentation

👉 Convert attribute variations into radio button
Live Demo & Documentation

👉 Product Basis Attribute Swatches Type Change
Live Demo & Documentation

👉 Show All Color, Image & Button Swatches Type In the Same Attribute
Live Demo & Documentation

👉 Insert New Image Replacing Globally Added Image For Image Variation Swatches In Each Product
Live Demo & Documentation

👉 Insert New Color Replacing Globally Added Color In Color Variation Swatches For Each Product
Live Demo & Documentation

👉 Convert Manually Created Attribute Variations Into Color, Image, and Label Swatches
Live Demo & Documentation

👉 Change Variation Product Gallery After Selecting Single Attribute Like Amazon Or AliExpress
Live Demo & Documentation

👉 Generate Selected Attribute Variation Link
Live Demo & Documentation

👉 Option to Select ROUNDED and SQUARED Attribute Variation Swatches Shape In the Same Product.
Live Demo & Documentation

👉 Show Cross Sign For Out of Stock Variation Swatches (Unlimited Variations Without hiding out of stock item from catalog)
Live Demo & Documentation

👉 Blur Out of Stock Variation Swatches (Unlimited Variations Without hiding out of stock item from catalog)
Live Demo & Documentation

👉 Hide Out of Stock Variation Swatches (Unlimited Variations Without hiding out of stock item from catalog)
Live Demo & Documentation

👉 Shop Page Swatches Size Control
Live Demo & Documentation

👉 Make Selected Attribute Variation Swatches Size Larger Than Other Default Attribute Variations
Live Demo & Documentation

👉 Keep Attribute Variation Selected on Product Page After Choosing from Catalog page like Walmart
Live Demo & Documentation

👉 Show Custom Text in Variation Tooltip
Live Demo & Documentation

👉 Show Custom Image in Variation Tooltip
Live Demo & Documentation

👉 Swatches Border Styling
Live Demo & Documentation

👉 Hover Swatches Border Styling
Live Demo & Documentation

👉 Active Swatches Border Styling
Live Demo & Documentation

👉 Archive Page Swatches Alignment
Live Demo & Documentation

👉 Show Variation Product Stock Notice
Live Demo & Documentation

👉 WooCommerce Filter Widget
Live Demo & Documentation

👉 Compatible with Printful, Alidrop, and Multivendor Plugins
👉 Customize Tooltip Text and Background Color
👉 Enable / Disable Ajax Variation
👉 Archive page swatches positioning
👉 Archive page swatches alignment
👉 Tooltip display setting on archive/shop page
👉 Variation clear button display setting.
👉 Customize Tooltip Text and Background Color
👉 Customize swatches colors, background and border sizes
👉 Automatic updates and exclusive technical support

🏆 Customers’ Feedback For Variation Swatches For WooCommerce


‘This is one of the best swatches plugin available. The thing that separates it from the rest is the amazing customer support. I had an issue with my website, and the friendly GetWooPlugins team was able to get it resolved quickly!’


‘These guys went above and beyond trying to help me out, I had an issue with my theme and one of the plugins after a woocommerce update and they really did the best they could to help me solve the problem! Thank you so much guys specially Shamser!’


‘Super plugin! He literally saved 🙂 a huge thank you to Ahmed who provides extraordinary support. Congratulations to the whole team!’

Will be buying from you again!’

Sites Built With Variation Swatches for WooCommerce Plugin

Officially tested plugins

Compatible WooCommerce Plugin

Forum and Feature Request

Pro Version

For Quick Support, feature request and bug reporting

For more information


  • Variation Color Swatch Preview
  • Variation Image Swatch Preview
  • Variation Button / Label Swatch Preview
  • Product QuickView Preview
  • Out Of Stock Variation Preview
  • Tooltip Preview
  • Tooltip Setting
  • Attribute Variation Shape
  • Attribute Variation Display Behavior
  • Variation Swatches Size and Font Setting
  • Global Variation Image Swatches Attribute List Preview
  • Global Variation Color Swatches Attribute List Preview


Automatic Install From WordPress Dashboard

  1. Login to your the admin panel
  2. Navigate to Plugins -> Add New
  3. Search Variation Swatches for WooCommerce
  4. Click install and activate respectively.

Manual Install From WordPress Dashboard

If your server is not connected to the Internet, then you can use this method-

  1. Download the plugin by clicking on the red button above. A ZIP file will be downloaded.
  2. Login to your site’s admin panel and navigate to Plugins -> Add New -> Upload.
  3. Click choose file, select the plugin file and click install

Install Using FTP

If you are unable to use any of the methods due to internet connectivity and file permission issues, then you can use this method-

  1. Download the plugin by clicking on the red button above. A ZIP file will be downloaded.
  2. Unzip the file.
  3. Launch your favorite FTP client. Such as FileZilla, FireFTP, CyberDuck etc. If you are a more advanced user, then you can use SSH too.
  4. Upload the folder to wp-content/plugins/
  5. Log in to your WordPress dashboard.
  6. Navigate to Plugins -> Installed
  7. Activate the plugin


How can I configure attributes?

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 attribute name to edit an exists attribute or in the Add New Attribute form you will see the default Type selector.
  3. Click that Type selector to change attribute’s type. Besides default options Select and Text, there are more 3 options Color, Image, Button/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 will be a new option at the end of the form that allows you choose color from colorpicker, upload image or choose as a button for those terms.

Is it compatible with any kinds of WooCommerce Theme?

Yes, it’s compatible with any WooCommerce theme including OceanWP / Astra / Flatsome / X-Theme / Avada / Uncode / Storefront / Labomba / WR Nitro / Divi / BeTheme. But sometimes it may require small css tweak.

For more details. Check this 100+ WooCommerce Themes that support Variation Swatches plugin

Does it show in product QuickView?

Yes, it supports any kinds of product quick view.

Does it work on MultiSite?

Yes, it is.

How to use it on ajax load more?

If your theme follow wordpress ‘post-load’ event with document then you don’t have to do anything.
Here is the details about it:

But if you don’t then just call this javascript function on ajax load event

And your are ready to go.


April 8, 2021
This is a perfect plug in for your store. Very easy to use and looks neat! Not to mention the support is definitely awesome. Dhul would help me with everything that I ask him. Really the best. You won't regret it!
April 6, 2021
The app is good and works well but I had somre really specific demand. No problem for the support they reacted in 5 mn and through a google meet call they were able to help me live while I was tchating with a specialist. I learnt really nice tricks in the process. Thank you
April 6, 2021
This premium plugin has provided me so many great options for flexibility on a site for my client. It has allowed us to have nice pictures for variation swatches that we can click and auto change the main image. The support team has been very helpful as well when we had one feature I could not get working and they showed me how to make it work for my site. Thanks!
Read all 459 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 7 locales. 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.


1.1.13 – 10-03-2021

  • Add: WooCommerce and WordPress Compatibility
  • Update: Remove _.contains and replace with _.includes

1.1.12 – 02-03-2021

  • Update: Add UnderscoreJS on script dependency

1.1.11 – 01-03-2021

  • Fix: WooCommerce Composite Products selection issue
  • Update: Swatch support for Global Ajax complete event
  • Update: Swatches Markup Modified
  • New: Disable WoodMart theme default swatches

1.1.10 – 16-02-2021

  • Fix: Error when woocommerce not available

1.1.9 – 12-02-2021

  • Fix: no_cache header modification issue

1.1.8 – 08-02-2021

  • Fix: RTL label css
  • Update: Load scripts globally

1.1.7 – 01-02-2021

  • Support: WooCommerce Composite Product

1.1.6 – 27-01-2021

  • Update: Extended note on Performance Section

1.1.5 – 13-01-2021

  • Update: Remove wp_ajax_wvs_get_available_variations hook

1.1.4 – 12-01-2021

  • Fix: WC_Cache_Helper::invalidate_cache_group() method issue.

1.1.3 – 10-01-2021

  • Update: Use WC_Cache_Helper for template caching
  • Update: Support Latest WP and WC

1.1.2 – 26-11-2020

  • Fix: Customizer JS Issue.

1.1.1 – 16-11-2020

  • Update: WooCommerce 4.7 compatibility

1.1.0 – 27-10-2020

  • Add: Selected attribute name beside label
  • Update: Support WooCommerce 4.6 version
  • Update: Accessibility


  • Update: Support WooCommerce 4.4 version
  • Update: Support WordPress 5.5 version
  • Fix: Alpha color channel issue


  • Update: Support WooCommerce 4.3 version


  • Add: wvs-no-css will add on when stylesheet disabled. wvs-css will add on when stylesheet enabled, wvs-no-tooltip will add on when tooltip disabled, wvs-tooltip will add on when tooltip enabled.


  • Update: Remove CSS Selector from body tag.


  • Add: Filter wvs_product_global_attribute_image_id to modify attribute image.
  • Add: Variation attribute image preview based on availability.


  • Fix: User select issue on firefox mobile.


  • Add: WordPress 5.4 compatibility
  • Fix: Default image for quote attribute value.


  • Fix: Rollback some features to 1.0.76 to fix a known issue.


  • Fix: Attribute behavior: Hide issue


  • Add: WooCommerce 4.0 compatibility
  • Fix: Facebook for woocommerce issue.
  • Divi theme css issue fix.


  • Fix: settings option php notice.


  • Fix: mobile double tab clear issue.


  • Fix: tooltip issue.


  • Fix: quickview issue


  • Add: Namespace on themes events
  • Fix: WooCommerce Product bundle Issue.


  • Update: Tooltip transform
  • Fix: Field Dependency Js Load


  • Fix: Divi builder load issue.
  • Fix: Default selected tooltip Issue.
  • Update: Field Dependency css.


  • Update: Disable Defer JS Load by Default and on mobile device.


  • Fix: WooCommerce transients clear fix


  • Fix: Swatch Image Size CSS Issue


  • Fix: Simple product Issue


  • Add: Speed Improvement


  • Fix: Mobile Scroll Issue


  • Add: Select attribute set type button by default.
  • Fix: Transients issue.


  • Add: WC 3.7 update


  • Fix: CSS source map issue.


  • Fix: Clear selection js error fix.


  • Add: Dokan Multivendor Support added


  • Fix: Inactive WooCommerce notice
  • Fix: Known Issues


  • Fix: Some known issues
  • Add: WordPress 5.2 Compatibility


  • Fix: Language load
  • Add: FacetWP Load More Option
  • Add: WooCommerce 3.6 update


  • Add: Oxygen Theme Support CSS


  • Fix: Load Assets without CDN.
  • Remove: Product Page popup attribute


  • Fix: IE 11, CSS flexbox issue


  • Add: Yith Product filter support


  • Add: Flatsome theme Infinite Scroll Support
  • Fix: Massive Dynamic theme CSS Issue


  • Fix: Archive more click issue.
  • Add: Adiva Theme support.


  • Fix: Gecko theme support
  • Add: Set default Shape style to Squared Shape


  • Fix: Some speed issue.


  • Add: Filter disable_wvs_body_class to disable or enable body class.


  • Add: Filter disable_wvs_enqueue_scripts to disable or enable enqueuing scripts.
  • Add: Filter disable_wvs_inline_style to disable or enable inline style.


  • Fix: WC 3.5 Issue


  • Add: IE-11 Support
  • Add: Exporter-Importer


  • Fix: Uncode theme Issue


  • Fix: JS Reload variation.


  • Fix: uShop by themetim CSS Issue


  • Improve: Live Feed

1.0.39 and

  • Fix: Elementor Pro CSS Issue


  • Remove: Pro Class from Settings


  • Add: RTL Support
  • Fix: The Gem Theme CSS Issue


  • Add: Yith Infinite Scroll support
  • Fix: Yoast SEO Focused keyword issue.


  • Add: AURUM theme support
  • Fix: WooCommerce Product Bundle conflict.


  • Fix: Known JS Issue


  • Fix: CSS Issue


  • Add: Out of stock product crossed also if “Hide out of stock items from the catalog” unchecked.


  • Add: Kalium theme css fix


  • Add: body class uniqueness
  • Add: Centralise feed
  • Fix: Elementor Pro JS Issue


  • Add: IE-11 fallback
  • Add: Increase variation_threshold label
  • Fix: Divi woo_layout_injector script override


  • Add: Admin Notice CSS


  • Add: SelectBox class for more control
  • Add: StockHolm Theme Compatibility


  • Improve: Tooltip
  • Add: Enfold Theme Compatibility


  • Add: gwp_affiliate_id Filter for Affiliate link ID in more place.


  • Improve: Frontend Visual Appearance
  • Fix: Some known issues


  • Improve: Frontend Visual Appearance
  • Add: Flatsome Theme shortcode override


  • Add: OceanWP Theme Compatibility
  • Add: Sober Theme Compatibility
  • Add: Shophistic Lite Theme Compatibility
  • Add: Old Haven Theme Compatibility


  • Fix: Known JS Issue
  • Fix: Tooltip disable item disable issue
  • Add: gwp_affiliate_id Filter to add affiliate referral link


  • New: Font Size settings
  • Improve: Frontend Visual Appearance


  • New: Size settings
  • Improve: Visual Appearance


  • Update: CSS
  • New: Attribute behaviour


  • Fix: Visual CSS Issue


  • Update: Improve JS Functionality
  • Update: Multisite Compatibility


  • New: Attribute deselect option
  • Fix: Custom attribute select from product
  • Update: translation


  • New: Support Jetpack’s Infinite Scroll event, post-load event.
  • New: wvs_product_attribute_image_size filter to change attribute image size
  • New: Increased tooltip z-index


  • Fix: Avada theme select issue


  • Fix: Disable publish button issue


  • New: Attribute create from product
  • New: Variation Preview color, image
  • New: Settings option also added on customizer
  • Fix: Any variation issue caused by outofstock variation


  • New: Extendable hooks added to extend
  • New: ajax variation threshold option added to control ajax variation.
  • Fix: Out Of Stock Product Issue.


  • Fix: Merged Pull request from spoyntersmith
  • Fix: Tooltip hardware acceleration issue fix for theme animation
  • Fix: use jquery sibling instead of prev


  • Update: Improve variation javascript to support ajax variation
  • Update: Renamed tooltip attribute to resolve conflict
  • Update: Renamed variation javascript class name


  • Update: Improving frontend CSS
  • Update: Disable Bootstrap tooltip conflict


  • Update: translation


  • Fix: backend js issue


  • Fix: Number Select Issue


  • New: Css class on body based on settings
  • Update: tooltip and frontend css changed
  • New: add_theme_support( 'woo-variation-swatches', array( 'tooltip' => FALSE, 'stylesheet' => FALSE ) ); for theme developer default setting control.
  • New: wvs_clear_transient to clear saved transient.


  • New: attribute tooltip
  • New: Default stylesheet enable/disable option
  • New: Display style added to show Rounded / Squared shaped style


  • Fix: text type select list

1.0.0 – 2017-12-20

  • Initial release