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 types will be converted into the variation swatches. You can set attribute types:

• Automatically convert the dropdown tyle to the button or radio swatch tyle by default
• Convert the dropdown tyle to the color, image swatch, variation image swatches.

 

Customizing quickly the existing global attributes in WooCommerce.

You can customize all existing global attributes in WooCommerce rapidly 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.

 

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

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

• 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.

 

Styling Swatches profiles.

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.

• 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:

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.

• Styling a swatches profile of button tyle: Setting up and customizing a default button swatch: Name, Transition duration padding, height, width, font size, the size on mobile mode, on the product list, color, box-shadow effect.
• Styling Hover status: Customizing the hover status color, background, border, box-shadow effect, reduce size.
• Styling Selected status: Customizing the selected status color, background, border, box-shadow effect, reduce size.
• Styling Tooltip: Customizing the tooltip color, border, font size, and positions.

 

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.

• Add more custom attributes: Setting to display more custom attributes.
• Assign category: Choosing in which categories the custom attributes apply.
• Display Style: Setting to display global attributes in 2 styles: Horizontal or vertical.
• Display Type: Setting to display global attributes in 5 types: Button, Color, Image, Variation Image, Radio.
• Swatches profile: Selecting to show the display setting in a particular swatches profile.
• Show on product list: allowing to show/hide a particular global attribute on the product list.

 

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.

• Display Style: Setting to display global attributes in 2 styles: Horizontal or vertical.
• Display Type: Setting to display global attributes in 5 types: Button, Color, Image, Variation Image, Radio.
• Swatches profile: Selecting to show the display setting in a particular swatches profile.
• Show on product list: allowing to show/hide a particular global attribute on the product list.
• Search attribute: Searching for a particular global attribute.

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. Clear on Reselect for single product:On single product page, clicking on a selected attribute will deselect it.

Swatches Profile

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

• Enable to use tooltip option: Display the note word when hovering on a

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

 

 

Display on the Product List

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

Custom Attributes

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.

1. Attribute name: Fill in the name of the attribute you want to customize.
2. Category: Select the categories that you want to customize the attribute.
3. Display type: Select the type that you want to display the attribute: Button, Image, Color, Variation Image, Radio.
4. Swatches profile: Select the available swatches profile to apply for the attribute.
5. Show on product list: show/hide the custom attribute on the product list.
6. Display style: Choose to display the custom attribute between the horizontal style and vertical style.
7. Action: Generate/remove the rules for the current cutsom attribute.
8. Save: To save all settings.

 

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.

1. Select the Attributes tab in the Product Data
2. These attributes are what you’ve created in the dropdown menu.
3. Visible on the product page: Enable to display this attribute on the product page.
4. Used for variations: Enable to use variation swatches on the product page.
5. Swatches settings: Click on to set displaying the swatches as you desire on the product page
6. This option to show/hide the variation swatches on the archive page.
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. Terms of the attribute: You can add, edit, clone and remove the terms of each attribute.
11. 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.

Swatches Settings

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.

 

 

1. Search attribute taxonor: Search for a global attribute.
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. Save: To save the changes in the setting of an attribute.
9. Save all: To save the changes in the settings of all attributes.

Thank you for your attention!

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