WooCommerce Variation Swatches


GS WooCommerce 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 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.

WooCommerce Variation Swatches 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.

WooCommerce attribute variation plugin allows you beautiful tooltips on variation swatch hover. Based on your requirement you enable and disable hover from the settings.

GS WooCommerce Variation Swatches by GS Plugins

Live Demo | Upgrade to PRO | Documentation | Support | Contact

Plugin Features

  • Completely integrate with WooCommerce plugin
  • Work on variable product only
  • Work on variable product quick view
  • Enable attributes into images swatches
  • Enable attributes into color swatches
  • Enable attributes into label/text/button swatches
  • Control attribute setting globally.
  • Create new attribute swatch in product editing page.
  • Compatible with popular themes and plugins.
  • Flexible tooltip insert and display settings
  • Settings panel availabe to control options.
  • Free updates for one year.
  • Auto update notification.
  • Auto update from dashboard.


You may like other plugin from GS Plugins

  • GS Testimonial Slider – Testimonials slider to display client’s recommendations.
  • GS Logo Slider – Logo Slider to display partners, clients or sponsor’s Logo.
  • GS Portfolio – Portfolio WordPress plugin to showcase your projects.
  • GS Team Members – Team members showcase with Profile info & Social connectivity links.
  • GS Projects – Projects showcase with URL, Client Review & Ratings, Gallery, Videos.
  • GS Books Showcase – Books showcase with Author, Published on, Review & Ratings, Gallery.
  • GS Coaches – Coaches with Experience, Skills, Review & Ratings, Certification.
  • GS Posts Grid – WordPress Posts Grid Plugin to display latest Posts elegantly.
  • GS Posts Widget – WordPress Posts Widget Plugin to display latest Posts elegantly.

WooCommerce Plugins

Social Plugins

Other Plugin


  • Single Product Variation
  • Product QuickView
  • Available Attribute Options
  • Variation Product Edit view
  • Attribute Color Type Frontend Preview
  • Attribute Label Type Frontend Preview
  • Attribute Image Type Frontend Preview
  • Settings Panel


Install GS WooCommerce Variation Swatches plugin as a regular WordPress plugin. Here is different ways to install GS WooCommerce Variation Swatches plugin :

Install by Search Plugin

  • In your Admin, go to menu Plugins > Add New
  • Search GS WooCommerce Variation Swatches
  • Click to install
  • Activate the plugin
  • WooCommerce Variation Swatches settings panel will show under Settings menu.

Install by Upload Plugin

  • Download the latest version of GS WooCommerce Variation Swatches (.zip file)
  • In your Admin, go to menu Plugins > Add New
  • Select “Upload Plugin”
  • Click on “Choose File”
  • Select downloaded gs-woocommerce-variation.zip & click on ‘Install Now’ button
  • Activate the plugin
  • WooCommerce Variation Swatches settings panel will show under Settings menu.

Install Plugin using FTP

  • Upload gs-woocommerce-variation folder inside the /wp-content/plugins/ directory
  • Go to WordPress dashboard > Plugins & Activate the GS WooCommerce Variation plugin
  • WooCommerce Variation Swatches settings panel will show under Settings menu.


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 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 choose as a button for those terms.
Is it compatible with any kinds of WooCommerce Theme?

Yes, it’s compatible with woocommerce theme including Flatsome / X-Theme / Avada / Uncode / Storefront / Labomba. But sometimes it may require small css tweak.

Does it show in product QuickView?

Yes, it supports any kinds of product quick view (pro).


Great plugin!

We're already using the plugin since our website relaunch last years and it works great. Great support!


With some CSS I was able to get what I need even in the free version. Because the plugin displays variation swatches on the archive page. Here's what I had to edit: Set uo on settings page dont saved. For example, I want to chenge add to cart text, but I cant. On archive page svatces shows as vertical rectangle, but not a sqare. In other its what I need.

Well… It’s a demo

You've added screenshots from the pro version on the free one. Sorry but this is wrong in so many ways. The free version doesn't even have a settings page.
Read all 5 reviews

Contributors & Developers

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



version 1.2

  • Added – Help & Documentation Info
  • Fixed – Menu Position conflict with Product Slider

version 1.0

  • Initial release