WooCommerce Variation Swatches


Plugin Demo | Documentation | Get Pro

WooCommerce Variation Swatches is easy to use WooCommerce Product Variation Swatches Plugin for WooCommerce. This Plugin terns the product variation select options fields into beautiful look of colors, images and labels. By using this plugin you can show WooCommerce variations in to colors, images & labels instate of default dropdown fields. That give new experience of your Ecommerce site and product page look for your customers. So customers can easily select his variations and place order.

WooCommerce Variation Swatches plugin allow you to customize border, background color image. Tooltip is great feature for this plugin. It is easy to install and customize its behaviour.

WooCommerce Variation Swatches by default work in product detail page view attributes color, images & label. It also support in QuickView option.

WooCommerce Variation Swatches plugin has Tooltip control, Square or Rounded Shape, custom image size, Tooltip background & font color also font size. for disable product variation its cross color and opacity control.


  • Enable Color/Image/Label/Text/Button Swatches For Variable Product Attribute Variations
  • Option for ROUNDED/SQUARED Attribute Variation Swatches Shape.
  • Cross Sign/Blur/Hide For Out of Stock Variation Swatches
  • Swatches Size Control at product page
  • Swatches Tooltip Settings
  • Worked at Quick View Popup
  • Customize Tooltip / swatches colors, background and border sizes
  • Compatible with popular WooCommerce themes and plugins

Pro Features

  • Archive / Catalog / Shop / Category / Tag page swatches
  • Custom tooltip option (Image / text)
  • Support Override settings at every single product
  • Tooltip and others style settings
  • Single or multi attribute at archive / Catalog / Shop / Category / Tag page

Pro Plugin Demo | Pro Documentation | Get Pro

For any bug or suggestion please mail support@radiustheme.com


  • Variation swatches
  • Variation swatches Tooltip
  • General settings
  • Advance Settings
  • Style Settings
  • Tools Settings

Часто задаваемые вопросы

Need Any Help?
  • Please mail us at support@radiustheme.com
  • We provide 15 hours live support
How to Use WooCommerce Variation Swatches
  • Go to WooCommerce > settings > Product Swatches
How can I configure attributes?

Even this plugin has been installed and activated on your site, variable products will still show dropdowns if you have 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, 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 is will be a new option at the end of form that let you choose the color, upload image or choose as a button for those terms.
Is it compatible with any kinds of WooCommerce Theme?

Yes, it is compatible with Most popular WooCommerce themes , but need some css update.

Does it show in product QuickView?

Yes, it supports any kinds of product quick view.

Does it work on MultiSite?

Yes, it is.


Found what I was looking for. It does was it does and does it well. Easy to use and blurrs/crosses out attributes that aren't available in a variable product combination. The only suggestion to the developer I could make would be add an option to list the attributes either vertically or horizontally 🙂 Thanks for the smooth plugin.
This definitely makes out store more appealing and overall looks much better than a dropdown. Some of the other variation plugins don't have as much customization as this one as it can also show the attribute color text when hovering and choose between color or image. This is the one to use!
Everything Ok. But for some reason the first attribute in my case Size when i select the type other than select it will only show as Select in the front product page. if i create another attribute and choose button it will show fine but not the first attribute. Overall works fine and have some customization.
Посмотреть все 8 отзывов

Участники и разработчики

«WooCommerce Variation Swatches» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:


Перевести «WooCommerce Variation Swatches» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

Журнал изменений


  • Add script loading settings
  • Remove title attribute which create double tooltip issue


  • PHP bug fix


  • Script loading bug fix


  • Minor Style update


  • Update UI
  • Add hook to fix color picker issue


  • Fix text domain issue
  • Compatible with Woocommerce 3.7 version


  • Fix the select dropdown duplicate issue


  • Add Admin menu at top admin bar
  • Also add the Clear cache menu item


  • Fix plugin deleted error function not exist wc_get_attribute_taxonomies


  • Fix some javascript issue


  • Fix image selection issue at WooCommerce attribute


  • Fix some Javascript issue
  • Make some changes with the coding structure


  • Update some css


  • Description update


  • Initial release at 20/11/2018