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.

 

Key Features of WooCommerce Product Variations Swatches

 

– Auto Convert Dropdown Into Button Swatches 

– Convert Any Variations Dropdown Into Swatches With Just A Few Steps.

– Customize The Global attributes and Custom Attributes In The Plugin Settings.

This plugin allows you to customize quickly all existing global attributes in WooCommerce through the Global Attributes settings.

• Search attribute: Search bar is provided for the admin to search for particular global attributes.
• Display Style: Display the swatches horizontally or vertically in relation with the attribute title.
• Display Type: Display global attributes in different types: Button, Color, Image, Variation Image, Radio, Select, and Theme Default ( user’s theme default design of variation).
• Swatches profiles: Show global attributes in one of the available swatches profile.
• Show on product list: Show/hide an the 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: Display the swatches horizontally or vertically in relation with the attribute title.
• Display Type: Display custom attributes in different types: Button, Color, Image, Variation Image, Radio, Select, and Theme Default ( user’s default design of variation).
• Swatches profile: Show custom attributes in one of the available swatches profile.
• Show on product list: Show/hide a particular custom attributes on the product list.

– Unlimited Swatches Profiles

WooCommerce Product Variations Swatches provides you 3 default swatches profiles. But you can create more by cloning the current profile, edit to make them your ideal profile, or remove the unnecessary 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.
• Cloning the profile: The swatches can be cloned. The duplicated one will inherit the original one’s settings.
  Note: When you clone any profile, make sure you add it a new profile name. Or it can’t be saved.
• Customize the plugin in every status: You can make the swatches display in different customization when it’s hovered, selected, and in its default status.
• Attribute value: Show the attribute value in Image/Color type.
• Customizing Tooltip: You can customize the tooltip status when a variations swatch is hovered, edit the tooltip content, and customize its Color, Border, Font size and Positions.

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

– Swatches Settings On WooCommerce Widget

You can customize the swatches when you use “Filter Product by Attribute”

Note: As of WordPress 5.8, the Block Widgets Editor replaces the previous widgets administration. All widgets are still available as Legacy Widgets when using the new Block Widgets Editor. However, to maintain full widget settings functionality, you must install the Classic Widgets plugin which restores the previous (“classic”) WordPress widgets settings screens. You can visit this article for more information.

With the new Block Widget, our plugin can’t interfere and make changes to the swatches. Therefore, users would need to install the Classic Widgets plugin to configure the swatches settings in the Woo Widgets.

 

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.
• Custom CSS: If all the settings are not enough, and you need extra customization, you can always add your own custom CSS.
• Multilingual compatibility: Compatible with WPML and Polylang if you want to add text for the “Add to cart” button.
• Actively supported.

 

 

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 & Install:

If you’re using the free plugin, you can either add the plugin in the WordPress Dashboard, or manually upload the plugin file. If you’re using the premium version, you must install the plugin manually, the instruction for both is in this KB post.

Update The Plugin:

To update the purchased plugin, within 6 months from purchase, you can receive updates automatically on one domain by authenticating the plugin on that domain. Follow this instruction for specific steps.

Or you can update the plugin manually (no expiry date, you can do it for a lifetime). Simply re-download your purchased plugin file in your Envato account – Download list. More info in this instruction – B. UPDATE PLUGINS MANUALLY.

For free version of the plugin, you can always update the plugin in the WordPress Plugins list. You can view the instruction above – scroll down to the IV. UPDATE FREE PLUGINS part.

 

Guiding video on how to install and set up:

 

 

After activating the plugin, the variations products in the dropdown type will be changed to button swatches.

You can modify them as you want in the plugin settings.

1. Global Attributes: Where to modify global attributes in plugin settings and what you can do
   • Default Design: Bulk edit the swatches settings for the global attributes – These configuration will apply to all products
   • Design with Product category: Build different settings for the same global attribute, but these configuration will apply only to items in specific selected categories
2. Custom Attributes: What is custom attribute, how to create custom attribute and where to modify
   • Edit custom attributes in product editor page: Edit swatches settings for the custom attribute directly on the product editor page. These configuration will apply to only that product, it takes the highest priority
   • Edit custom attributes for product groups: Swatches settings for custom attributes that will apply to selected product groups. 
3. Swatches settings in WooCommerce Attributes list: Configure the swatches right when you create new global attributes
4. Swatches in WooCommerce widget: Filter product by Attribute
   • Important note.
   • How to add “Filter Products by Attribute”
   • Design the swatches for the filter widget

 

 

Customize Global Attributes in bulk

Global attributes are product attributes that can be used for many different products, they’re stored in the Attributes settings of WooCommerce.

You can edit them all on Global Attribute settings. No need to configure each product attribute one by one in the product data.

 

Go to Dashboard >> Variations Swatches >> Global Attributes. Here you’re provided with full settings to customize your global attributes and make them display how you want.

Step 1: Search for the attribute you want to edit its swatches.

Step 2: Customize its “Default design” for the general settings on all product pages and on product list. Visit this documentation – Default Design.

Step 3: Set extra rules if needed with particular customization for the attribute on specific categories. Visit this documentation – Extra rule to design with Product category.

Step 4: Save/Save All.

After you’re happy with the global attribute customization, you can go to a single product page, or the product list to view the result.

 

 

Customize Custom Attributes

Custom Attributes are created for individual product. The purpose of a custom attribute, is to represent a certain feature of a product, and is used for that one product only. It’s not applicable to most other products.

Once you have custom product attribute for any product, you can always customize them.

 

In the Custom Attributes settings

Step 1: Create a custom attribute in the Product data

 

Step 2: Configure the custom attribute with the attribute title, add image/color if needed.

Step 3: Go to the Custom Attribute settings, manage rules for the custom attribute and configure the settings for its swatches. Visit this documentation. 

 

 

Swatches for one single product

Even though you customize the swatches for all attributes, including global and custom attributes. But in case you want to make them different on some specific products. You can do it in the product data.

Step 1: Go to Product data of the product you want to customize its attributes >> Attributes

Step 2: Select the attribute to customize >> Click “Swatches settings”

Step 3: Configure the swatches settings

• Make your settings with these options: Product list visibility; Style; Type; Swatches Profiles; Change product image.
• Add an image/color(s) for the attribute terms if needed.
• If you want to keep the initial settings of any option in the Swatches settings, select “Global …”
  • If global attribute: The option will inherit its initial settings in the “Global Attributes” settings.
  • If custom attribute: The option will inherit its initial settings in the “Custom Attributes” settings.

Step 4: Click “Save attributes“.

Now the attribute is edited on that product. On other products, it’ll still show up like how you configure in the Global/Custom Attributes settings. Go to the frontend to check.

 

 

Swatches settings in Attributes

Global attributes are common attributes that you want to use for several products in your WooCommerce store. They’re created and placed in WooCommerce >> Products >> Attributes. All these attributes there will be listed in the plugin settings, and it’ll be updated each time you update your global attribute list.

After you install and activated WooCommerce Product Variations Swatches, you can customize the new created attribute right away when you make them.

Also, you’ll be redirected to the settings of all Global Attributes, or specific attribute by using the “Swatches settings” buttons.

 

To customize the new created global attribute

Step 1: In the Dashboard >> Products >> Attributes, create a new attribute

Step 2: Configure these options below for its swatches: Type (Display Type); Change product image; Display Style; and Design Profile. 

Step 3: Click “Add 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: If an attribute is not configured, its “Displayed type” will be the type you selected in this option.
2. Blur out backorders:  Enable this option so when the admin allows customers to backorder an item, the attributes go blur
3. Prioritize first attribute: For products that have more than 1 attribute, when selecting a value of the first attribute but the current combination is not available, select this value anyway and change selections of other attributes instead
   *Important note: To make out-of-stock items clickable, you have to turn off “Disable ‘out of stock’ variation items” option
4. Custom CSS: Add your own custom CSS here.
5. Import Settings: After you edit the exported settings file, import the settings back.
6. Export Settings: Export the current settings to a CSV file.
7. Reset settings: This button allows you to reset all settings back to original settings.

 

Swatches Profile

The variations of each attribute can be different with various combination of Display Type and Swatches Profiles. On this settings page, you can create as many profiles and configure them.

By default, the plugin builds 3 profiles for you – Button, Color, and Image. Each profile includes settings of swatches : on default status; on hover status; on selected status; settings for tooltip; and settings for attribute value if the Display Type is “Color”, or “Image”.

When you add more profiles by “cloning” any particular profile, the settings will be the same.

Go to Dashboard >> Variation Swatches >> Swatches Profile.

• Clone: Click this button to duplicate the current swatch profile
• Remove: Click to remove the current swatch profile.

Now let’s configure the settings for each swatch profile.

 

Default Styling

1. Name: Swatch profile name
2. Transition Duration: Set the length of time the swatch transition should take to complete (each time the swatch changes its status; for example; from Default status to Selected status). The unit is Millisecond.
3. Padding: Manage the padding of the profile.
4. Height: Manage the profile height.
5. Width: Manage the profile width.
6. Font size: Manage the font size of the profile text
7. Attribute image size: Set the image size of attribute.
8. Change the size of attribute items on: Make the swatch size on product list/mobile devices based on its initial size on product page.
   • Product list: Manage the size of the swatches on the product list.
   • Mobile: Manage the size of the swatches on mobile devices.
9. Text color: Manage the profile text color.
10. Background color: Manage the profile background color.
11. Border color: Manage the profile border color.
12. Border radius: Manage the radius of the swatch profile’s corners.
13. Border width: Specifies the width of all four sides of the swatch profile’s border
14. Box shadow color: Select the box shadow color for the swatch profile.
15. Out of stock: Out-of-stock items will become one of the 4 status you selected in this option. Leave “Do not change” if you want the out-of-stock items to not look different from in-stock items

 

Hover Styling

1. Text color: Select the text color for the swatch profile when it’s hovered.
2. Background color: Select the  swatch profile’s background color when it’s hovered.
3. Border color: Select the swatch profile’s border color when it’s hovered.
4. Border radius: Manage the radius of the swatch profile’s corners when it’s hovered.
5. Border width: Manage the width of all four sides of the swatch profile’s border when it’s hovered.
6. Box shadow color: Select the swatch profile’s box shadow color when it’s hovered.
7. Change the size of attribute items: When the swatch profile is hovered, change its size to maximum 2 times its size in the default status.

 

Selected Styling

1. Text color: Select the text color for the swatch profile when it’s selected.
2. Background color: Select the  swatch profile’s background color when it’s selected.
3. Border color: Select the swatch profile’s border color when it’s selected.
4. Border radius: Manage the radius of the swatch profile’s corners when it’s selected.
5. Border width: Manage the width of all four sides of the swatch profile’s border when it’s selected.
6. Box shadow color: Select the swatch profile’s box shadow color when it’s selected.
7. Change the size of attribute items: When the swatch profile is selected, change its size to maximum 2 times its size in the default status.

 

Tooltip Styling

1. Enable: Enable to display the extra information when the user moves the mouse pointer over an element.
2. Background color: Select the tooltip background color.
3. Border color: Select the tooltip border color.
4. Tooltip content: Tooltip content can be shown in either image or text, some shortcodes can be used in the tooltip content are:
   • {attribute_value} Display the name of the attribute term.
   • {attribute_name} Display the attribute name.
   • {attribute_value_desc} Display the description of each attribute term.
   • {attribute_image} Display the image set for the each attribute term as tooltip
   • {variation_image} Display the variation image as the tooltip.
5. Position: The place where the tooltip appears, in relation to the swatch profile.
6. Border radius: Set the tooltip border radius.
7. Border width: Manage the width of all four sides of the swatch profile’s border when it’s selected.
8. Font size: Font size of the tooltip text if the tooltip is displayed as text.
9. Tooltip image width: Image width of the tooltip if it’s displayed as an image.

 

Attribute value for Color/Image type

1. Enable: Enable this option to display the value of each attribute term when the Display Type of the attribute is Image/Color
2. Vertical position: The place of the attribute value in the swatches to display vertically.
3. Vertical offset: Indicate the distance of the attribute value vertically from its “Vertical position”.
4. Cut off long text: If the attribute value text is long, enable this option to cut it off.
5. Font scale: Set the font scale based on the swatch size.
6. Text color: Text color for the attribute value.
7. Background: Background color for the attribute value.

 

 

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: If you enable this option, customers will not be able to click to choose these variations in this case.
   Note: This function does not work for products whose number of variations is greater than the “Ajax variation threshold”.
3. Clear on Reselect: Enable it so when users click on the selected attribute, it will be deselected.
4. Enable attribute title: Enable this option to show the attribute title on a single product page.
5. Show selected attribute item: Enable it to display the selected item beside the attribute title.
6. Swatches align: Align the swatches.

 

 

Swatches on Product list

These Settings allow you to customize displaying variation swatches of variable products on the product list.

1. Enable: Enable this option to display swatches on the product list.
2. Ajax variation threshold: Set the threshold of Ajax variations on the product list.
3. Disable “Out of stock” variation items: If you enable this option, Out-of-stock variations are unclickable.
4. Enable add to cart: Enable this option to allow customers to select variations and add them to cart right on the product list. All variations will be visible on the product list and can’t be hidden if this option is enabled.
5. Text of the “add to cart” button: This option only appears when the “Enable add to cart” is activated, it allows you to edit the text for the “Add to cart” button. This text can be translated if you use WPML or Polylang.
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 title on the product list.
8.  Clear on reselect: On the Product list, clicking on a selected attribute will deselect it.
9.  Enable tooltip: Turn on to show the tooltip of the variation swatches on the product list. The tooltip will be hidden if you enable the (17)”Swatches slider” option below.
10.  Assign page: Assign on which pages the variation swatches will be shown up.
    Important note: 
    To handle WP’s Conditional Tags, this plugin uses eval() which is very dangerous because it allows execution of arbitrary PHP code. Therefore, please only fill this field with proper conditional tags which are validated and/or provided by trusted developers.
11.  Swatches align: Align the swatches.
12.  Position: The position of variation swatches on the shop page, category page, and other product list pages.
13. Custom position: Add the hook for the custom position you want. You should ask the theme/plugin developers for a needed hook
14.  Maximum attribute items: The maximum number of items of an attribute can be displayed. Set to 0 to not limit this.
15.  Show more link: This option is used when the total items of an attribute are greater than the Maximum attribute items above.
16. Text of more link: The text will be shown instead of the hidden attribute items.
17. Swatches slider: Enable this option to display all items of the attribute in a slider. The tooltip will be hidden.
    When this option is enabled, these 2 options below will appear:
18. Swatches slider for attribute type: Choose the type of attribute to convert to the slider. Leave blank to apply it to Image, Variation image, Color type.
19. Maximum attribute items: Set the maximum number of items of an attribute to convert to the slider.

 

 

Custom Attributes

Custom Attributes settings include all swatches settings for custom attribute. Make rules for each attribute and configure them here.

In these settings, if a custom attribute has the same name as the field “Attribute name” and products that contain this custom attribute belongs to one of the selected “Product category”, the swatches settings of the current rule will be applied to that custom attribute.

1. Attribute name: Fill in the name of the attribute you want to configure.
2. Product category: Select the categories that you want to apply custom attribute rules. The product with the custom attributes in the “Attribute name” must belong to these categories to be applied the rules
3. Display type: Select the type that you want to display the custom attribute.
4. Swatches profile: Select swatches profile for the custom attribute.
5. Display style: Display the swatches vertically or horizontally in relation to the attribute title.
6. Show on product list: Show/hide the custom attribute on the product list.
7. 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 the attribute; Auto detect variation image.
8. Action: Duplicate/Remove the rules for the current custom attribute.

Important note: Make sure to check the rules for Custom Attributes before start configuring the Custom Attributes rules.

• Rules are checked from top to bottom and will stop if the attribute matches a rule
• For each rule, if a custom attribute has the same name(case-insensitive) as field “Attribute name” and products that contain this custom attribute belongs to one of selected “Product category”, the swatches settings of current rule will be applied to that custom attribute
• If Product category of a rule is empty, this rule will be applied to products from all categories
• If “Enable add to cart” option(Swatches on Product List) is ON, “Show in product list” option cannot be changed

 

 

Global Attributes

All global attributes will be listed in the “Global Attributes” settings.  Go to Variation Swatches >> Global Attributes.

On this settings page, you can customize/edit the swatches settings for each attribute.

• Search the attribute by their name using the “Search attribute” field.
• After you customize one particular attribute, save the new settings of that attribute only with the “Save” button.
• Use the “Save All” button if you customize/edit the settings of all attributes.

 

Each global attribute has the default design and the extra design for particular product categories.

Default Design

1. Show in product list: Enable this option to show the currently editing attribute on the product list.
2. Display style: Make the attribute terms horizontally or vertically to the attribute title.
3. Display type: Select one display type for the attribute among the available types.  If you want to keep the initial WooCommerce swatches type, select “Theme default”.
4. Swatches profile: Select one profile you want to display the attribute terms in.
5. Change product image: When user select an attribute term, make the image changes to attribute image/variation image, or not change.
6. Term settings: The table contains attribute terms and the settings for them. In the “Term settings” fields, you add the image and/or color for each attribute term according to necessity.

 

To add color gradient for the attribute

Step 1: Use the “Clone” button to duplicate the current color.

Step 2: Edit the duplicated color

Step 3: Select the color separator. View the change in the preview color when you edit.

 

Extra rule to design with Product category

Other than the general settings for the attribute above, you can create your extra rules for the categories. These extra rules will be applied to the attribute when they’re in the products belong to the selected categories.

For example; you can make the “Color” attribute show as images with clothes, but make them buttons with shoes.

1. Product category: Select the product categories. The attribute in items belong the those selected categories will be applied these extra settings.
2. Display type: Select one display type for the attribute among the available types.  If you want to keep the initial WooCommerce swatches type, select “Theme default”.
3. Swatches profile: Select one profile you want to display the attribute terms in.
4. Show in product list: Products belong to the selected categories will show/hide the attribute on the product list.
5. Change product image: When user select an attribute term, make the image changes to attribute image/variation image, or not change.
6. Display style: Make the attribute terms horizontally or vertically to the attribute title.
7. Action: Clone/Remove the current rule

 

 

Swatches on Woo Widgets

Important Note:

As of WordPress 5.8, the Block Widgets Editor replaces the previous widgets administration. All widgets are still available as Legacy Widgets when using the new Block Widgets Editor. However, to maintain full widget settings functionality, you must install the Classic Widgets plugin which restores the previous (“classic”) WordPress widgets settings screens. You can visit this article for more information.

With the new Block Widget, our plugin can’t interfere and make changes to the swatches. Therefore, users would need to install the Classic Widgets plugin to configure the swatches settings in the Woo Widgets.

 

How to add Filter Products by Attribute to Widget?

Note: This filter is function of WooCommerce. Our plugin makes the variations in the filter look better, but we don’t interfere the filter function. If you encounter any filter relating issue, please follow this instruction to test.

To display “Filter Products by Attribute’ on the product list, Go to Dashboard/ 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 the filter

 

 

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

Go to Dashboard >> Variation Swatches >> Woo Filter Widget

1. Enable: Enable it to use “Filter Products by Attribute” for WooCommerce Store.
2. Max items: Number of attribute terms to be visible on Woo widget. Leave 0 and all items will be shown without the “Show more” button
3. Display Style: Display the attribute terms vertically or horizontally.
4. Design attribute: Customize all settings relating to term detail.
5. Product count: Customize all settings relating to product count.

 

Design attribute

These settings are to customize the swatches on the Woo widgets.

Default styling: Customize the default style of the swatches.

• Show attribute label: Enable this option to display name of the attribute term. Only works when the Display Type is color/image
• Color: Swatches text color in default status.
• Background: Swatches background color in default status.
• Box shadow color: Select the box shadow color.
• Padding: Manage the swatches padding.

Hover styling: Customize the swatches on Woo widgets when hovered

• Color: Swatches text color when hovered.
• Background: Swatches background color when hovered.
• Box shadow color: Swatches box shadow color when hovered.

Selected styling: Customize the swatches on Woo widgets when selected

• Color: Swatches text color when selected.
• Background: Swatches background color when selected.
• Box shadow color: Choose the box shadow color.

 

Product count

These settings enable and allow the admin to customize product count for filter of attributes.

Default styling: Customize the default style of the product quantity.

• Enable: Enable to show the quantity of product.
• Color: Text color of the product quantity.
• Background: Background color of the product quantity.
• Border color: Border color of the product quantity.
• Padding: Padding of the product quantity.
• Border width: Manage the width of all four sides of the product quantity border.
• Border radius: Manage the radius of the product quantity’s corners.

Hover styling: Customize the product quantity when hovered.

• Color: Text color of the product quantity when hovered.
• Background: Product quantity background color when hovered.
• Border color: Product quantity border color when hovered.
• Border radius: Manage the radius of the product quantity’s corners when hovered.

Selected styling: Customize the product quantity when the swatches is selected.

• Color: Text color of the product quantity when the attribute is selected.
• Background: Background color of the product quantity when the attribute is selected.
• Border color: Product quantity border color when selected.
• Border radius: Manage the radius of the product quantity’s corners when the attribute is selected.

 

 

Our plugin is compatible with:

 

Plugin	Author
FacetWP	Darren Cooney
Ajax load more	Darren Cooney
JetSmartFilters Plugin for Elementor	Crocoblock

Thank you for your attention!

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