Created: 02/2020
Latest updated: 10/2023 – Updated version: 1.1.1
By: VillaTheme
Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!
What is WooCommerce Product Variations Swatches?
WooCommerce Product Variations Swatches is a professional plugin that allows you to show and select attributes for variation products. The plugin displays variations select options of the products under colors, buttons, images, variation images, radio so it helps the customers observe the products they need more visually, save time to find the wanted products than dropdown type for variations of a variable product.
– Auto Convert Dropdown Into Button Swatches
– Convert Any Variations Dropdown Into Swatches With Just A Few Steps.
– Customize The Global attributes and Custom Attributes In The Plugin Settings.
This plugin allows you to customize quickly all existing global attributes in WooCommerce through the Global Attributes settings.
You can easily install to display custom attributes of the variations products by the custom attribute feature in the plugin.
– Unlimited Swatches Profiles
WooCommerce Product Variations Swatches provides you 3 default swatches profiles. But you can create more by cloning the current profile, edit to make them your ideal profile, or remove the unnecessary profiles.
– Display Product Variations Swatches In The Product List And Assigned Pages.
You can manage to show/hide the product variations swatches through some options in the display on the product list tab.
– Swatches Settings On WooCommerce Widget
You can customize the swatches when you use “Filter Product by Attribute”
Note: As of WordPress 5.8, the Block Widgets Editor replaces the previous widgets administration. All widgets are still available as Legacy Widgets when using the new Block Widgets Editor. However, to maintain full widget settings functionality, you must install the Classic Widgets plugin which restores the previous (“classic”) WordPress widgets settings screens. You can visit this article for more information.
With the new Block Widget, our plugin can’t interfere and make changes to the swatches. Therefore, users would need to install the Classic Widgets plugin to configure the swatches settings in the Woo Widgets.
Make sure that those limits to a minimum as follows in order for free-trouble while installing:
If you’re using the free plugin, you can either add the plugin in the WordPress Dashboard, or manually upload the plugin file. If you’re using the premium version, you must install the plugin manually, the instruction for both is in this KB post.
To update the purchased plugin, within 6 months from purchase, you can receive updates automatically on one domain by authenticating the plugin on that domain. Follow this instruction for specific steps.
Or you can update the plugin manually (no expiry date, you can do it for a lifetime). Simply re-download your purchased plugin file in your Envato account – Download list. More info in this instruction – B. UPDATE PLUGINS MANUALLY.
For free version of the plugin, you can always update the plugin in the WordPress Plugins list. You can view the instruction above – scroll down to the IV. UPDATE FREE PLUGINS part.
Guiding video on how to install and set up:
After activating the plugin, the variations products in the dropdown type will be changed to button swatches.
You can modify them as you want in the plugin settings.
Global attributes are product attributes that can be used for many different products, they’re stored in the Attributes settings of WooCommerce.
You can edit them all on Global Attribute settings. No need to configure each product attribute one by one in the product data.
Go to Dashboard >> Variations Swatches >> Global Attributes. Here you’re provided with full settings to customize your global attributes and make them display how you want.
Step 1: Search for the attribute you want to edit its swatches.
Step 2: Customize its “Default design” for the general settings on all product pages and on product list. Visit this documentation – Default Design.
Step 3: Set extra rules if needed with particular customization for the attribute on specific categories. Visit this documentation – Extra rule to design with Product category.
Step 4: Save/Save All.
After you’re happy with the global attribute customization, you can go to a single product page, or the product list to view the result.
Custom Attributes are created for individual product. The purpose of a custom attribute, is to represent a certain feature of a product, and is used for that one product only. It’s not applicable to most other products.
Once you have custom product attribute for any product, you can always customize them.
In the Custom Attributes settings
Step 1: Create a custom attribute in the Product data
Step 2: Configure the custom attribute with the attribute title, add image/color if needed.
Step 3: Go to the Custom Attribute settings, manage rules for the custom attribute and configure the settings for its swatches. Visit this documentation.
Even though you customize the swatches for all attributes, including global and custom attributes. But in case you want to make them different on some specific products. You can do it in the product data.
Step 1: Go to Product data of the product you want to customize its attributes >> Attributes
Step 2: Select the attribute to customize >> Click “Swatches settings”
Step 3: Configure the swatches settings
Step 4: Click “Save attributes“.
Now the attribute is edited on that product. On other products, it’ll still show up like how you configure in the Global/Custom Attributes settings. Go to the frontend to check.
Global attributes are common attributes that you want to use for several products in your WooCommerce store. They’re created and placed in WooCommerce >> Products >> Attributes. All these attributes there will be listed in the plugin settings, and it’ll be updated each time you update your global attribute list.
After you install and activated WooCommerce Product Variations Swatches, you can customize the new created attribute right away when you make them.
Also, you’ll be redirected to the settings of all Global Attributes, or specific attribute by using the “Swatches settings” buttons.
Step 1: In the Dashboard >> Products >> Attributes, create a new attribute
Step 2: Configure these options below for its swatches: Type (Display Type); Change product image; Display Style; and Design Profile.
Step 3: Click “Add attribute”
In the general setting tab of the plugin settings, you can set a default display type of variation swatches. It can be the button or radio type.
The variations of each attribute can be different with various combination of Display Type and Swatches Profiles. On this settings page, you can create as many profiles and configure them.
By default, the plugin builds 3 profiles for you – Button, Color, and Image. Each profile includes settings of swatches : on default status; on hover status; on selected status; settings for tooltip; and settings for attribute value if the Display Type is “Color”, or “Image”.
When you add more profiles by “cloning” any particular profile, the settings will be the same.
Go to Dashboard >> Variation Swatches >> Swatches Profile.
Now let’s configure the settings for each swatch profile.
These Settings allow you to customize displaying variation swatches of variable products on the product list.
Custom Attributes settings include all swatches settings for custom attribute. Make rules for each attribute and configure them here.
In these settings, if a custom attribute has the same name as the field “Attribute name” and products that contain this custom attribute belongs to one of the selected “Product category”, the swatches settings of the current rule will be applied to that custom attribute.
Important note: Make sure to check the rules for Custom Attributes before start configuring the Custom Attributes rules.
All global attributes will be listed in the “Global Attributes” settings. Go to Variation Swatches >> Global Attributes.
On this settings page, you can customize/edit the swatches settings for each attribute.
Each global attribute has the default design and the extra design for particular product categories.
To add color gradient for the attribute
Step 1: Use the “Clone” button to duplicate the current color.
Step 2: Edit the duplicated color
Step 3: Select the color separator. View the change in the preview color when you edit.
Other than the general settings for the attribute above, you can create your extra rules for the categories. These extra rules will be applied to the attribute when they’re in the products belong to the selected categories.
For example; you can make the “Color” attribute show as images with clothes, but make them buttons with shoes.
Important Note:
As of WordPress 5.8, the Block Widgets Editor replaces the previous widgets administration. All widgets are still available as Legacy Widgets when using the new Block Widgets Editor. However, to maintain full widget settings functionality, you must install the Classic Widgets plugin which restores the previous (“classic”) WordPress widgets settings screens. You can visit this article for more information.
With the new Block Widget, our plugin can’t interfere and make changes to the swatches. Therefore, users would need to install the Classic Widgets plugin to configure the swatches settings in the Woo Widgets.
Note: This filter is function of WooCommerce. Our plugin makes the variations in the filter look better, but we don’t interfere the filter function. If you encounter any filter relating issue, please follow this instruction to test.
To display “Filter Products by Attribute’ on the product list, Go to Dashboard/ Appearance/Widgets and click on Add Widget to add the Filter Products by Attribute.
Configure the opened window for Widget Filter Products by Attribute.
Go to Dashboard >> Variation Swatches >> Woo Filter Widget
Design attribute
These settings are to customize the swatches on the Woo widgets.
Default styling: Customize the default style of the swatches.
Hover styling: Customize the swatches on Woo widgets when hovered
Selected styling: Customize the swatches on Woo widgets when selected
Product count
These settings enable and allow the admin to customize product count for filter of attributes.
Default styling: Customize the default style of the product quantity.
Hover styling: Customize the product quantity when hovered.
Selected styling: Customize the product quantity when the swatches is selected.
Plugin | Author |
FacetWP | Darren Cooney |
Ajax load more | Darren Cooney |
JetSmartFilters Plugin for Elementor | Crocoblock |
Oxygen builder | https://oxygenbuilder.com/ |
Germanized für WooCommerce | vendidero |
ALD – Aliexpress Dropshipping and Fulfillment for WooCommerce | VillaTheme |
Thank you for your attention!
If you have any question, please create a topic at our FORUM, we will support within 24 hours.