Variation Swatches for WooCommerce

Description

Variation Swatches for WooCommerce plugin provides a much nicer way to display variations of variable products. This plugin will help you select style for each attribute as color, image or label. With this plugin, you can present product colors, sizes, styles and anything else in the better way which is not support by WooCommerce.
This plugin only add more options to show product variations with swatches. It doesn’t touch the default dropdown style from WooCommerce.

With a friendly and easy-to-use interface, you can add default color, image or label to each attribute in the attribute management page. It can also help you pick the right style for quick-add attribute right inside the editing product page.

Features provided with this plugin:

  • Completely integrate with WooCommerce plugin
  • Work on variable product only
  • Create attribute color swatches
  • Create attribute image swatches
  • Create attribute label/text swatches
  • Manage attribute globally
  • Create new attribute swatch in product editing page
  • New options in WooCommerce Settings that help control swatches easier without touching code

Screenshots

  • Variations on frontend
  • Add new attribute
  • Edit Attribute
  • Attribute color
  • Attribute label
  • Attribute image
  • Add new attribute color when edit a product

Installation

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. Log in to your WordPress dashboard, navigate to the Plugins menu and click Add New.
  2. In the search field type “Variation Swatches for WooCommerce” and click Search Plugins.
  3. Once you’ve found it, you can install it by simply clicking Install Now button.

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.

Config 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 type the label for those terms.

FAQ

Installation Instructions

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. Log in to your WordPress dashboard, navigate to the Plugins menu and click Add New.
  2. In the search field type “Variation Swatches for WooCommerce” and click Search Plugins.
  3. Once you’ve found it, you can install it by simply clicking Install Now button.

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.

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

Reviews

Beautiful plugin, but I have a request!

This is a beautiful plugin! Adds so much value to your site 🙂

One little oversight: when a white color label is selected, you can’t see this, because the checkmark is also white! I’ve solved this with some custom CSS, adding a harsh drop-shadow to the checkmark.

Second: Suppose I have a product with two attributes, “Background Color” and “Foreground color”. I will create a bunch of variations in a way that all combinations are possible, except that the two colors are the same. When using WooCommerce without this plugin, selecting an option in the first dropdown, will remove the inappropriate values from the second dropdown. This happens dynamically. With your plugin enabled, we always see every color! Even when the combination technically isn’t possible (the original HTML dropdown, that is invisible, gets updated, your swatches just don’t update along with it).

I know it might be quite complicated, but are you willing to fix this?

If you need more information/examples/screenshots, feel free to email me directly: lennert.daniels[at]gmail.com

Read all 25 reviews

Contributors & Developers

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

Contributors

Changelog

1.0.3

  • Fix the issue of adding attributes in the “Attributes” tab

1.0.2

  • Support WooCommerce 3.0

1.0.1

  • Add “swatches-support” class to the variations form

1.0.0

  • Initial release.