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.0 or higher
• Woocommerce 7.0 or higher 
• PHP Version 7.0 or higher

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

 

 

What is WooCommerce Attributes and Variations?

Before exploring what WooCommerce Attributes and Variations are, you should be familiar with the WooCommerce variable products.

• What is a variable product?
• How to create a variable product?
• How to create attributes?
• How to create variations?
• Distinguish between attributes and variations

What is a variable product?

As WooCommerce states, Variable products in WooCommerce let you offer a set of variations on a product, with control over prices, stock, image, and more for each variation. You can use them for a product like a t-shirt, which you can offer in large, medium, and small sizes, all in different colors.

How to create a variable product?

To create a new variable product:

1. Go to “Products” in WP-Admin (the site’s admin area).
2. Click on “Add New Product” at the top of the page.
3. Enter the product name.
4. Select “Variable Product” from the “Product data” dropdown menu.

5. Navigate to the “Attributes” tab on the left-hand side under the “Product data” dropdown.
6. Add either a global/existing attribute or create a new one specific to the product (Custom attribute). You can see how to distinguish between a global and a custom attribute

How to create attributes?

• To add a global attribute:
  • If you’ve already created global attributes, choose the desired one from the “add existing” dropdown menu at the top of the settings.
  • Select the variations or values you wish to use from that attribute. You can add them all by clicking the “Select All” button below the values box. Alternatively, you can choose specific ones by clicking on the “Select Values” box and selecting them individually.
• To add a new Attribute:
  • Click the “Add New” button at the top of the settings.
  • Provide a name for your attribute (e.g., Material).
  • Add the necessary values or variations. Separate each variation/value with a pipe symbol (|). For example: Cotton|Silk…

You can see how to create and distinguish between a global and a custom attribute

7.  Then “Save attributes”.

8. Next, navigate to the Variations tab.

How to create variations?

9. Check whether

• “Generate variations” to automatically add all possible variations based on attribute values.
• Select “Add manually” to specify which variations will be available for the product.

10. Next, click on each variation to expand its product menu.

11. Enter the necessary product information such as price, stock status, weight, dimensions, shipping class, and description. Additionally, add Linked Products if required. Repeat this process for all variations.

12. Optionally, you can utilize the “Bulk Actions” dropdown at the top of the “Variations” menu to set product information for all variations simultaneously.

13. Finally, click “Save changes” at the bottom of the variations menu, and then click “Publish” in the top right corner of the screen to publish the product.

 

Distinguish between attributes and variations

As demonstrated above, we can understand between the 2 definitions: Attributes and variations

Product attributes in a WooCommerce store, as well as in most other eCommerce platforms, are characteristics that provide additional information about your product. For example, if you’re selling a dress, the product attributes might include its size and color. Similarly, if you’re offering courses, an attribute could be the prerequisite skills needed to enroll in the course.

These attributes serve to provide detailed information about the product. In the case of the dress, they specify the available sizes and colors, helping customers make informed decisions. Similarly, for the courses, listing the required skills ensures that potential students know whether the course is suitable for them.

Variations in WooCommerce represent the various options available to customers when purchasing a product. These options are determined by the product’s attributes.

A variation in WooCommerce is a combination of different attribute options, referred to as ‘terms’. For example, consider a dress:

• The dress has two attributes: Size and Color.
• Sizes include the terms Small, Medium, and Large.
• Colors include White and Black.

In summary, WooCommerce attributes provide detailed information about your products, while variations offer customers a selection of choices. It’s important to note that attributes are optional for many products but are essential for Variable products, as they serve as the foundation for creating necessary variations.

 

 

Distinguish between Global and Custom Attributes

There are two options for adding attributes. You can use global or custom attributes. Let’s look at both options below.

• Global Attributes – What they are and how to create
• Custom Attributes – What they are and how to create
• Distinguish Global/Custom Attributes

Global Attributes

Global attributes apply to all products in your store. For example, if you run an online apparel shop, size, and color are common global attributes you might use. Brand names can also serve as global attributes.

How to create a global attribute in your WooCommerce Store:

1. Navigate to “Products” → “Attributes” on your WordPress dashboard.
2. Here, you can create and name new attributes. You can also edit or delete existing attributes.
3. Adding a global attribute to a product: Navigate to the Product page and scroll down to the product data section. Within this section, you’ll find several tabs, including Attributes. Click on the Attributes tab, then select your global attribute, and add terms for the global attribute, then save attributes.
   

Custom Attributes

Custom attributes are tailored to individual products, distinguishing them from global attributes. They are exclusively applicable to items with distinct characteristics or standalone products within your store.

While custom attributes serve to showcase product details, they do not facilitate product display or filtering. For instance, ‘Limited edition’ could serve as a custom attribute for jewelry, watches, or other premium items. This attribute is reserved for products with unique features that differentiate them from others in the store. It is important to note that custom attribute names may distinguish between lowercase and uppercase characters.

To create a custom attribute in your WooCommerce Store, follow these steps:

1. Go to the Product page and scroll to the product data section. Under this section, select the Attributes tab. Click the Add button to create a new custom product attribute.
2. Add a unique name to the name box. Add multiple values to the Value(s) box and separate them with the  “|” key, then save attributes.

 

Distinguish between Global and Custom Attributes

A tip to tell those two apart (Global/Custom attributes) on the product page back end, other than by how they are created, is their name and terms.

• Global attribute name/terms can’t be changed on product page editor (they must be changed in WooCommerce Attributes settings)
• Custom attribute name/terms, on the other hand, is editable.

Let’s see this video guide for further demonstrations about the global and custom attributes.

Swatch Styles

You have a variety of swatch styles available to showcase your attribute, tailored to your preference including button, color, image, variation image, radio, select, or theme default. Below are the ways these styles are displayed. To change among swatch styles, switch among options in the Display type for:

• Global attribute => Go to Global Attributes > Navigate to a specific attribute > Default design > Display type, go to this part of the documentation No3.
• Custom attribute => Go to Custom Attributes > Add Attribute name > Display type, go to this part of the documentation No3
• On a single product editing page => Scroll down to the product data section > Attributes, Navigate to a specific attribute > Swatches settings > Select swatch type, go to this part of documentation

 

You can see this video guide to observe each style and how to switch among them.

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

Read all options for custom attribute customization in this documentation. In this part, we’ll learn how to create and customize custom attribute with our plugin.

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: Edit the customization options as needed. Visit this documentation for more details. 

 

 

 

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

Step 3: Configure the swatches settings

• • If you click “attribute …”: Redirect you to the Global Attributes page of that attribute or the Custom Attributes page (if the selected attribute is custom one). For custom attributes, the “Custom Attributes” setting doesn’t update them automatically, so you must add them manually
  • If you click “here”: You can edit attribute’s criteria right on the current page, including:
    • Show on product list
    • Display style
    • Display type
    • Swatches profile
    • Change product image

 

 

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 activate WooCommerce Product Variations Swatches, you can customize the newly created attributes right away when you make them.

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

 

To customize the newly 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”

 

 

Sort terms of attributes

WooCommerce allows you to customize the sorting order of your attributes and variations displayed on the product page.

For instance, if you prefer the item size options to display in a specific sequence like small, medium, large, etc., when customers are selecting the size variation, you can easily adjust the sort order by simply dragging and dropping the attribute into the desired position.

• Sort global attribute terms
• Sort custom attribute terms

Sort global attribute terms

WooCommerce offers you 2 methods to sort global attribute terms. Here’s a step-by-step guide to swiftly changing the sort order of global attributes for your WooCommerce products:

Method 1: Default sort order

Step 1: In the Dashboard > Click Products > Attributes in the left menu.

In this section, we’ll change the variations and attributes sort order for Color.

Step 2: Click on “Edit” under the Color attribute.

Step 3: Then, on the “Edit Attribute” page, navigate to the “Default sort order” dropdown.

This section assists the administrators in managing the sort order of terms on the shop product pages, offering 3 options:

• Name
• Name (numeric), and
• Term ID.

Choose the desired order and then click on the “Update” button to apply the changes.

It is noted that the custom ordering will be the 2nd method below.

Now that the default sort order is configured, it’s important to verify if the changes in order are reflected in the template.

 

Method 2:  Custom sort order

Custom ordering enables you to easily rearrange attribute terms by dragging and dropping them within the attribute section. Let’s walk through how it functions.

Step 1: In the Dashboard > Click Products > Attributes in the left menu.

In this section, we’ll also change the variations and attributes sort order for Color.

Step 2: Click on “Configure terms” below the color attribute.

Clicking on “Configure terms” will redirect you to the “Product Color” page.

To adjust the order of colors, hover over the three lines next to each attribute. You can then drag the attributes up or down to rearrange them according to your preference. When hovering over, the cursor will be displayed as a hand icon.

Now, visit the Product page to verify the new custom order.

Sort custom attribute terms

If you are new to the term Custom attributes, please refer to look through this part of our documentation.

There is no way to sort custom attributes, you must remove them and add them in the desired order.

* Important note: It is cautioned and not recommended to rename the custom attribute terms in order to sort the existing custom attribute as the assigned values might be conveyed to each term, they can not be changed respectively after renaming the terms. Moreover, you can not drag and drop custom attribute terms to sort custom attributes.

 

 

Shortcode

You can use this shortcode [viwpvs_swatches_archive] (following this guide) to show product swatches on the archive page.

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: This is the setting for default Display Type and default Swatches Profile, if an attribute is not configured. So, after selecting a default display type, enable a matching swatches profile under the Swatches Profile settings. If you select the first 3 options, then “Displayed type” will be the type you selected in the left dropdown. Variation displays depend on swatches profiles, choose the default Swatches Profile in the right dropdown:
   • None: Default to WooCommerce default display of variation.
   • Button
   • Radio
     
   • Variation Image: If you choose this selection, product variations are shown as image swatches with variation image (you can see this documentation for a better view how variation images are. With products with multiple attributes:
     • Use Variation Image swatches display for:
       • The first attribute: Priority from top to bottom
       • Only the attribute has name in: Fill in the attribute name(s) in the text area next to this selection
     • Except for the particular attribute – first attribute or selected attributes – all others will be displayed as buttons. Select a Swatches Profile to apply a Button display type. As mentioned, the final appearance of an attribute depends on both the Display Type and the Swatches Profile.
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 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 the attribute.
   • wooCommerce gallery thumbnail – 100×100
   • medium large -768×0
   • large – 1024×1024
   • 1536×1536 -1536×1536
   • 2048×2048 – 2048×2048
   • trp custom language flag – 18×12
   • woocommerce thumbnail – 324×324
   • woocommerce single  – 416×0
8. Change the size of attribute items on: Make the swatch size on the 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.
7. Single Swatches slider: Enable to show all items of the attribute in a slider on Product Detail Page
   • Swatches slider for attribute type: Choose type of the attribute to convert to slider. Leave blank to apply for Image,Variation Image, Color type
   • Minimum attribute items: The minimum number of items of an attribute to convert to slider

 

 

Swatches on Product list

WooCommerce Product Variations Swatches can show attribute and variation swatches on product list, like Shop and category pages. Go to Dashboard >> Variation Swatches >> Swatches on Product List to set up this feature and scroll down to learn all of it setting options below.

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. Redirect to product: Enable this option to redirect to the product page with the selected variation after clicking an attribute on product list.
   *Note: You must disable “Enable add to cart” option to use this feature.
5. 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.
6. 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.
7. 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.
8.  Show attribute name: Enable to show attribute title on the product list.
9.  Clear on reselect: On the Product list, clicking on a selected attribute will deselect it.
10.  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.
11.  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.
12.  Swatches align: Align the swatches.
13.  Position: The position of variation swatches on the shop page, category page, and other product list pages.
14. Custom position: Add the hook for the custom position you want. You should ask the theme/plugin developers for a needed hook to the position you need then add the Hook name to the custom position field of the plugin.
15.  Maximum attribute items: The maximum number of items of an attribute can be displayed. Set to 0 to not limit this.
16.  Show more link: This option is used when the total items of an attribute are greater than the Maximum attribute items above.
17. Expand attributes: (Available when “Show more link” is enabled) Select the option to display all attributes directly without redirecting to the individual product page.
18. Text of more link: (Available when “Show more link” is enabled) The text will be shown instead of the hidden attribute items.
19. 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:
20. Swatches slider for attribute type: (Available when “Swatches slider” is enabled) Choose the type of attribute to convert to the slider. Leave blank to apply it to Image, Variation image, Color type.
21. Maximum attribute items: (Available when “Swatches slider” is enabled) 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 apply the rules
3. Display type: Select the type that you want to display the custom attribute including button, color, image, variation image, radio, select, or theme default. You can see how they are displayed 
4. Swatches profile: Select the swatches profile for the custom attribute.
5. Display style: Display the swatches vertically or horizontally about the attribute title.
6. Show on product list: Show/hide the custom attribute on the product list.
7. Change Product Images: This feature allows the change of product images correspondingly when switching among variations applied for custom attributes. You can choose – Not change; Change to the 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 the  field “Attribute name” and products that contain this custom attribute belong to one of the  selected “Product categories”, the swatches settings of the 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 current 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 including button, color, image, variation image, radio, select, or theme default, if you want to keep the initial WooCommerce swatches type, select “Theme default”.  You can see how they are displayed. 
4. Swatches profile: Select one profile in which you want to display the attribute terms.
5. Change product image: When the user selects 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
Oxygen builder	https://oxygenbuilder.com/
Germanized für WooCommerce	vendidero
ALD – Aliexpress Dropshipping and Fulfillment for WooCommerce	VillaTheme
VARGAL – Additional Variation Gallery for WooCommerce	VillaTheme
Dokan (vendors can edit product swatches from the product edit page on their vendor dashboard)	Dokan, Inc.

Thank you for your attention!

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