WooCommerce Variation Swatches

Description

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

How To Install WooCommerce Variation Swatches Plugin for WooCommerce Variable Products

How To Import WooCommerce Swatches Plugin Data For Existing Product Attribute Variations

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

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.

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 this Plugin

  • Work on variable product
  • 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.
  • Compatible with popular themes and plugins
  • Option to select ROUNDED and SQUARED variation shape.
  • Flexible tooltip insert and display settings
  • Option to disable default plugin stylesheet for theme developer.
  • No extra option and no confusion.

PREMIUM FEATURES OF WOOCOMMERCE VARIATION SWATCHES

Live Demo | Upgrade to PRO | Documentation | Support

  • Individual Product Basis Swatches Customization
  • Enable Attributes Swatch In Archive / Store Pages
  • Control Swatches Width and Height on Archive Page.
  • Archive Swatches Position Define
  • Tooltip Display Setting on Archive Page.
  • Variation Clear Button Display Setting
  • Enable Attributes into Radio Button
  • Customize Tooltip Text and Background Color

Sites Built With WooCommerce Variation Swatches Plugin

Officially tested plugins

Forum and Feature Request

Pro Version

For Quick Support, feature request and bug reporting

For contribution

For more information

Screenshots

  • Single Product Variation page
  • Product QuickView
  • Available Attribute Options
  • Attribute Color Type Preview
  • Attribute Image Type Preview
  • Attribute Button / Label Type Preview
  • Single Variation Product Edit View
  • Simple Settings Panel
  • Advanced Settings Panel
  • Customizer Panel
  • Single Variation Product New attribute term

Installation

Automatic Install From WordPress Dashboard

  1. Login to your the admin panel
  2. Navigate to Plugins -> Add New
  3. Search WooCommerce Variation Swatches
  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

FAQ

Installation Instructions

Automatic Install From WordPress Dashboard

  1. Login to your the admin panel
  2. Navigate to Plugins -> Add New
  3. Search WooCommerce Variation Swatches
  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 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’s compatible with any woocommerce theme including Flatsome / X-Theme / Avada / Uncode / Storefront / Labomba / WR Nitro / Divi / BeTheme. But sometimes it may require small css tweak.

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?

Just call this javascript function on ajax load event $('.variations_form').wc_variation_form(). And your are ready to go.

Reviews

Very good plugin, fastest support

The plugin works fine for me. I encountered an small issue (an incompatibility with the OceanWP theme), i wrote to their support team and in less than a hour i got my problem solved.
Highly recommend this plugin!

doesn’t work

doesn’t work after installation. Settings change doesn’t change anything on product/shop pages

Go for it with no 2nd thought

Even the free version works great and looks awesome.
Surely the most competitive solution compared to several other even paid ones.
Thank you for your contribution.

Read all 48 reviews

Contributors & Developers

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

Contributors

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

Translate “WooCommerce Variation Swatches” into your language.

Interested in development?

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

Changelog

1.0.24

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

1.0.23

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

1.0.22

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

1.0.21

  • Fix: Known JS Issue
  • Fix: Tooltip disable item disable issue
  • Add: gwp_ref_id Filter for referral link

1.0.20

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

1.0.19

  • New: Size settings
  • Improve: Visual Appearance

1.0.18

  • Update: CSS
  • New: Attribute behaviour

1.0.17

  • Fix: Visual CSS Issue

1.0.16

  • Update: Improve JS Functionality
  • Update: Multisite Compatibility

1.0.15

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

1.0.14

  • 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

1.0.13

  • Fix: Avada theme select issue

1.0.12

  • Fix: Disable publish button issue

1.0.11

  • 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

1.0.10

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

1.0.9

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

1.0.8

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

1.0.7

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

1.0.6

  • Update: translation

1.0.5

  • Fix: backend js issue

1.0.4

  • Fix: Number Select Issue

1.0.3

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

1.0.2

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

1.0.1

  • Fix: text type select list

1.0.0

  • Initial release