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!
Lastest update: 09/05/2020
Updated to WooCommerce Product Variations Swatches ver 126.96.36.199
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 size of variation swatches: including padding, height, width, font size, transition durian.
3. Reduce the size of variation swatches on the Product list, mobile.
4. Customize the color of variation swatches: background, background color, border color.
5. Customize Border radius, box-shadow color, Out of stock status.
6. 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. Styling tooltip
* 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 option allows you to customize displaying variation swatches of variable products on the product list.
1. Enable add to cart: Activate this option to add a variable product to the cart after selecting on the product list.
2. Show attribute name: Enable to show attribute names on the product list.
3. Clear on reselect: On Product list, clicking on a selected attribute will deselect it.
4. Enable tooltip: Turn on to show tooltip of the variation swatches on the product list.
5. Assign page: Assign in which pages the variation swatches will be shown up.
6. Swatch align: Customize the positions of swatches: Left, right, center.
7. Position: The position of variation swatches on shop page, category page, and other products list pages
8. Maximum attribute items: The maximum number of items of an attribute can be displayed. Set to 0 to not limit this.
9. Show more link: This option is used when total items of an attribute are greater than the Maximum attribute items above
10 Text of more link: The text will be shown instead of the hidden attribute items.
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
Go to Variation Swatches / Swatches Settings, 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.