Thank you for using 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!
Created: 02/2020
Lastest update: 01/07/2020
Updated to WooCommerce Product Variations Swatches ver 1.0.2.3
By: Villatheme
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.
When you activate WooCommerce Product Variations Swatches plugin, the variation products in the dropdown type will be converted into the variation swatches.
This plugin allows you to customize quickly all existing global attributes in WooCommerce through the swatches setting of this plugin.
You can easily install to display custom attributes of the variations products by the custom attribute feature in the plugin.
WooCommerce Product Variations Swatches plugin allows you to design and style for swatches profiles.
You can manage to show/hide the product variations swatches through some options in the display on the product list tab.
Make sure that those limits to a minimum as follows in order for free-trouble while installing:
Go to Plugin/Add New/Upload Plugin/Choose file/ select plugin zip file woocommerce-product-variations-swatches/click “Install Now“/click “Active plugin“.
Done! Let’s start using the plugin.
Guiding video on how to install and set up:
After installing and activating the plugin, the variations products in the dropdown type will be converted into the variations swatches.
Go to Dashboard/ Global attributes to customize all existing global attributes rapidly.
There are 2 ways to add custom attributes: You can quickly configure custom attributes in the custom attribute tab of the plugin settings or configure and/or add custom attributes in the product editing of WooCommerce. Custom attributes in the product editing of WooCommerce will be presented in the following of How does it work.
Go to Dashboard/ Variation Swatches/ Custom attribute tab if a custom attribute has the same name as field “Attribute name” and products that contain this custom attribute belongs to one of selected “Product category”, the swatches settings of the current rule will be applied to that custom attribute.
3. Styling Swatches profiles.
Go to Dashboard/ Variation Swatches/ Swatches profile to configure swatches profiles.
4. Displaying Swatches on the product list and assigned pages
Go to Dashboard/ Variation Swatches/ Swatches on Product List you can configure displaying Swatches on the product list and assigned pages.
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.
This setting allows you to style variation swatches profiles, you can clone to vary other swatches profiles.
I. Styling the variation swatches
1. The name of the variation swatches profile.
2. Customize the transition duration and the size of variation swatches: including padding, height, width, font size, transition durian.
3. Set the image size of Attribute.
4. Change the size of variation swatches on the Product list, mobile.
5. Customize the color of variation swatches: background, background color, border color.
6. Customize Border radius, box-shadow color, Out of stock status.
7. Duplicate/Remove the current variation swatches design.
II. Styling hover states of variation swatches
* Customize the color and size of variation swatches in hover status: background, background color, border color, border radius, border width, box-shadow color, change the size of attribute items
III. Styling selected states of button variation swatches
* Customize the color and size of variation swatches in selected status: background, background color, border color, border radius, border width, box-shadow color, change the size of attribute items
IV. Tooltip styling
* Enable to use tooltip option: Display a note when hovering on a selector.
* Customize the color and size of tooltip: Text color, background color, border color, border radius, position of tooltip, border radius and font size.
This Settings allows you to customize displaying variation swatches of variable products on the product list.
When enabling Swatches slider:
Setting the Swatches for “Filter Products by Attribute” WooCommerce.
To display “Filter Products by Attribute’ on product list, Go to Doashboard/ Appearance/Widgets and click on Add Widget to add the Filter Products by Attribute.
Configure the opened window for Widget Filter Products by Attribute.
Alternatively, add an attribute you only want to use for one product or category. This would only be ideal if you have a product with unique variations.
There are 2 ways to add custom attributes: You can quickly configure custom attributes in the custom attribute tab of the plugin settings or configure and/or add custom attributes in the product editing of WooCommerce
I. Quickly configure custom attributes in the custom attribute tab of the plugin settings
In these settings, if a custom attribute has the same name as field “Attribute name” and products that contain this custom attribute belongs to one of selected “Product category”, the swatches settings of the current rule will be applied to that custom attribute.
II. Configure and/ or Add custom attributes in the product editing of WooCommerce
Go to Products/ All products, select a variation product you want to add custom attributes and edit it.
Now you can add/edit/remove custom attributes to your products.
This setting allows you to customize all global attributes in WooCommerce rapidly. If you do not change the swatches settings on edit product page, all the attribute setting are followed the Settings in Global attributes tab.
Go to Variation Swatches / Global Attributes, now you can customize the available global attributes of the variable products on your WooCommerce store.
Thank you for your attention!
If you have any question, please create a topic at our FORUM, we will support within 24 hours.