WooCommerce Product Variations Swatches

Support Purchase

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.

 

 

Features

 

Converting any variations dropdown type into swatches with a couple of clicks.

When you activate WooCommerce Product Variations Swatches plugin, the variation products in the dropdown type will be converted into the variation swatches.

Customizing the global attributes and custom attributes in the plugin setting.

This plugin allows you to customize quickly all existing global attributes in WooCommerce through the swatches setting of this plugin.

• Search attribute: You can use the search bar to search for an existing global attribute.
• Display Style: You can set to display global attributes in 2 styles: Horizontal or vertical.
• Display Type: You can set to display global attributes in 5 types: Button, Color, Image, Variation Image, Radio.
• Swatches profile: You can select to show one of the available swatches profiles.
• Show on product list: this allows you to show/hide an existing global attribute on the product list.
• Edit terms of the global attributes: You can customize each attribute term of an existing global attribute.

 

You can easily install to display custom attributes of the variations products by the custom attribute feature in the plugin.

• Custom attribute name: you can enter the name of the existing attributes, then customize them rapidly.
• Assign category: Choose in which categories customizing the attribute be applied.
• Display Style: You can select to display custom attributes in 2 styles: Horizontal or vertical.
• Display Type: You can select to display custom attributes in 5 types: Button, Color, Image, Variation Image, Radio.
• Swatches profile: Selecting to show custom attributes in one of the available swatches profile.
• Show on product list: This allows you to show/hide a particular custom attribute on the product list.

 

Unlimited Swatches profiles

WooCommerce Product Variations Swatches plugin allows you to design and style for swatches profiles.

• Customizing a swatches profile: You can customize to display a default swatch design pattern: Name, Padding, Height, Width, Font size, the size on mobile mode, on the product list, Color, Box-shadow effect.
• Styling Hover status: You can customize the hover status including Color, Background, Border, Box-shadow effect, Reduce size.
• Styling Selected status: You can customize the display status when a variations swatch is selected. The customization includes Color, Background, Border, Box-shadow effect, Reduce size.
• Customizing Tooltip: You can customize the tooltip status when a variations swatch is selected. including Color, Border, Font size and Positions of the tooltip.
• Clone/remove: You also can duplicate the current swatches profile to generate rapidly many swatch design patterns

 

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.

• Show Add to cart button: You can enable to show the Add to cart button and it will show up after selecting attributes.
• Show attribute name: You can select to show/hide the attribute name of variations swatches.
• Position: You can customize the positions of the variations swatches on the shop page, category page, and the products list.
• Text tooltip: This allows you to show or hide the variations text tooltip on the products list.
• Maximum attribute item: You can manage the number of the attribute items shown on the swatches.

 

OTHER FEATURES

• Auto-update: Enter your purchase code and the plugin will auto-update whenever there is a new version.
• Works on mobile: WooCommerce Product Variations Swatches work perfectly on mobile devices.
• Easy to use: Friendly interface and easy to use.

 

System Requires:

Make sure that those limits to a minimum as follows in order for free-trouble while installing:

• WordPress 5.4.x or higher
• Woocommerce 3.0.x 
• max_execution_time 60
• memory_limit 125M
• post_max_size 64M
• upload_max_filesize 64M

Download Plugin:

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.

 

1. Customizing quickly the existing global attributes in WooCommerce.

Go to Dashboard/ Global attributes to customize all existing global attributes rapidly.

 

2. Installing easily to display custom attributes of the variations products on the front end.

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.

General Settings

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.

1. Default Display Type: You can set the default display type in button or radio type.
2. Custom CSS: Add custom CSS to re-design as you want on your website.
3. Import Settings: This button allows to import the settings by CSV file.
4. Export Settings: This button allows to export the settings to CSV file.
5. Reset settings: This button allows to reset all settings back to original settings.

Swatches Profile

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.

 

Swatches on Single page

1. Ajax variation threshold: Set the threshold of ajax variation on single product pages, it should not be much high.
2. Disable “Out of stock” variation items: Enable this option, the out-of-stock variations on your site will turn to one of the statuses: Hide, Blur, Blur with icon (Go to Swatches profile to configure). Customers will not be able to click to choose these variations in this case.
3. Clear on Reselect: Enable it to click on the selected attribute will deselect it.
4. Enable attribute title: Enable it to show the attribute title on single product page.
5. Show selected attribute item: enable it to display the selected item beside the attribute title on single product page.
6. Swatches align: You can select to show swatches on the center, right, or left.

Swatches on Product list

This Settings allows you to customize displaying variation swatches of variable products on the product list.

1. Enable swatches on product list: Enable it to display swatches on the product list.
2. Ajax variation threshold: Set the threshold of Ajax variations on product list.
3. Disable “Out of stock” variation items: Enable this option, the out-of-stock variations on the product list pages of your site will turn to one of the statuses: Hide, Blur, Blur with icon (Go to Swatches profile to configure). Customers will not be able to click to choose these variations in this case.
4. Enable add to cart: Activate this option to add a variable product to the cart after selecting on the product list.
5. Text of the “add to cart” button: You can change this text button in your word. This text can be translated with WMPL ( The WPML plugin is required to activate in this case)
6. Enable product quantity: Enable this option to display the quantity field, which allows customers to add more products to the cart even on the product list page.
7.  Show attribute name: Enable to show attribute names on the product list.
8.  Clear on reselect: On Product list, clicking on a selected attribute will deselect it.
9.  Enable tooltip: Turn on to show tooltip of the variation swatches on the product list.
10.  Assign page: Assign in which pages the variation swatches will be shown up.
11.  Swatch align: Customize the positions of swatches: Left, right, center.
12.  Position: The position of variation swatches on shop page, category page, and other products list pages.
13.  Maximum attribute items: The maximum number of items of an attribute can be displayed. Set to 0 to not limit this.
14.  Show more link: This option is used when total items of an attribute are greater than the Maximum attribute items above.
15. Text of more link: The text will be shown instead of the hidden attribute items.
16. Swatches slider: Enable it to use sliders for displaying all items of attributes on product list.

When enabling Swatches slider:

1. Enable the swatches slider: Swatches are displayed in slider on product list.
2. Swatches slider for attribute type: Choose the type to convert to slideer. Leave black to appy it to image, Variation image, Color type.
3. Maximum attribute items: Set the maximum number of items of an attribute to convert to slider.

Swatches on Woo Widgets

Setting the Swatches for “Filter Products by Attribute” WooCommerce.

1. Enable it to use “Filter Products by Attribute” for WooCommerce Store.
2. Display type: Choose the display type for items of attribute. There are two types: Vertical and Horizontal.
3. Term details: Customize all settings relating to term detail.
4. Product count: Customize all settings relating to product count.

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.

1. Add Widget: Click the button to add the Filter Product by Attribute Widget.
2. Title: Set the Title For the Widget Filter Product by Attribute.
3. Attribute: Choose the attribute for  Attribute Filter.
4.  Display type: Choose the list type to use swatches style.
5. Query type:  Choose “AND” or “OR” query type for Filter.
6. Swatches settings: Click the button to do the settings of swatches on filter

Global Attributes

This setting allows you to customize all global attributes in WooCommerce rapidly.

Go to Variation Swatches / Global Attributes, now you can customize the available global attributes of the variable products on your WooCommerce store.

1. Search attribute:  Search for a global attribute you want to customize.
2. Attribute names: Name of the available global attributes of the variable products on your WooCommerce store.
3. Show on list product: Show/hide a particular global attribute on the product list.
4. Display Style: Set to display global attributes in 2 styles: Horizontal or vertical.
5. Display Type: Set to display global attributes in 5 types: Button, Color, Image, Variation Image, Radio.
6. Swatches profile: Select to show the variation swatches based on a particular swatches profile.
7. Terms of an attribute: Configure the attribute terms of an attribute.
8. Design with product category: Design for displaying variation swatches on specific product categories.
9. Save: To save the changes in the setting of an attribute.
10. Save all: To save the changes in the settings of all attributes.
11. Change Product Images: This feature allows to change product images correspondingly when switching among variations applied for global attributes. You can choose – Not change; Change to image set for attribute; Auto detect variation image.

 

 

 

Custom Attributes

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.

1. The rules for setting custom attributes.
2. Attribute name: Fill in the name of the attribute you want to customize.
3. Product category: Select the categories that you want to appply custom attribute rules.
4. Display type: Select the type that you want to display the attribute: Button, Image, Color, Variation Image, Radio.
5. Swatches profile: Select the available swatches profile to apply for the attribute.
6. Show on product list: show/hide the custom attribute on the product list.
7. Display style: Choose to display the custom attribute between the horizontal style and vertical style.
8. Change Product Images: This feature allows to change product images correspondingly when switching among variations applied for custom attributes. You can choose – Not change; Change to image set for attribute; Auto detect variation image.
9. Action: Generate/remove the rules for the current cutsom 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.

1. Select the Attributes tab in the Product Data
2. These attributes are what you’ve created in the dropdown menu.
3.  Enter the name of new attribute you want to add.
4. This option to show/hide the variation swatches on the archive page.
5. Check on the box to use this attribute for variation
6. This option to display or hide variation swatches on product list.
7. This option to display the variation swatches on the product page in 2 styles: Horizontal or vertical.
8. This option to display the variation swatches type on the product page: Button, Color, Image, Variation Image, Radio, Select.
9. This option to select an available variation swatches design for the product page.
10. Global change product image: This feature allows to change product images correspondingly when switching among variations applied for global attributes. You can choose – Not change; Change to image set for attribute; Auto detect variation image.
11. Terms of the attribute: You can add, edit, clone and remove the terms of each attribute.
12. Save attributes: To save all the settings above.

• Note: If you select the global option in one of these steps (6, 7, 8 or 9) that means you remain the initial global attribute created.

Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.