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
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 types will be converted into the variation swatches. You can set attribute types:
You can customize all existing global attributes in WooCommerce rapidly through the swatches setting of this plugin.
You can easily install to display custom attributes of the variations products on the front end by the custom attribute option. 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
WooCommerce product variations swatches plugin allows you to design and style for displaying swatches including Button design, Color design, Image design. Moreover, each tyle of variations swatches (button, color, image) will have own design customizations.
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:
These following steps guide you on how to show variation swatches, Go to Dashboard/Variation swatches settings:
1. Converting variation dropdown into swatches
You can set the default display type in button or radio. Or you can customize your own display style in the CSS field.
2. Styling Swatches profiles
In Swatches profile settings you can configure swatches profiles including Button design, Color design, Image design.
Each tyle of variation swatches (button, color, image) will have own design customizations.
3. Displaying Swatches on the product list and assigned pages
In Display on the product list tab, you can configure displaying Swatches on the product list and assigned pages.
4. Custom attribute
You can quickly configure custom attributes in the custom attribute tab of the plugin settings or configure 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.
5. Customizing quickly the global attributes of WooCommerce through the swatches settings
Go to Dashboard/ Swatches Settings to customize all global attributes in WooCommerce rapidly.
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 including Button design, Color design, Image design.
Each tyle of variation swatches (button, color, image) will have own design customization.
I. Styling the button variation swatches
1. The name of the button variation swatches profile.
2. Customize the size of button variation swatches: including padding, height, width, font size, transition durian.
3. Reduce the size of button variation swatches on the Product list, mobile.
4. Customize the color of button variation swatches: background, background color, border color.
5. Customize Border radius, box-shadow color, Out of stock status.
6. Duplicate/Remove the current button variation swatches design.
II. Styling hover states of button variation swatches
* Customize the color and size of button 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 button 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
Customize the color and size of button variation swatches in selected status: background, background color, border color, border radius, border width, box-shadow color, change the size of attribute items
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 swatch of variable product to cart on the product list.
2. Show attribute name:
3. Disable tooltip: Disable tooltip of the variation swatches on the product list.
4. Assign page: Assign in which pages the variation swatches will be shown up.
5. Swatch align: Customize the positions of swatches: Left, right, center.
6. Position: The position of variation swatches on shop page, category page and other products list pages
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: Quickly add custom attributes in the custom attribute tab of the plugin settings or add custom attributes in the product editing of WooCommerce.
I. Adding custom attributes in the custom attribute tab of the plugin settings
In these settings, you can add/ edit/ remove a custom attribute in WooCommerce quickly.
II. Adding 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.