1. Home
  2. Docs
  3. ProductX
  4. Addons
  5. Variation Swatches Addon

Variation Swatches Addon

The Variation Swatches Addon helps to convert variations into nice-looking Swatches to grab the attention and make things easier for the shoppers.

Enabling the Variation Swatches Addon

The ProductX variation swatches for WooCommerce let you showcase variations of your products in a very effective way. Here’s how you can use the ProductX variation swatches the right way. 

Installing the ProductX Plugin

The very first thing you need to do is have the ProductX WooCommerce builder plugin installed on your WordPress site. If you are having issues installing our plugin, you can check out the steps for installation and get a proper idea about installing the product. 

Note: Before getting started, it is important to know that the ProductX WooCommerce variation swatches only work for variable products. Variable products are the ones that allow you to show ‘variations’. For example, if you have a T-shirt that you sell in varying sizes (Large, Medium, and Small), you can use our variation swatches to show the different variations. 

Turn on ProductX WooCommerce Variation Swatches Addon 

The ProductX WooCommerce Swatches is a ProductX Addon. You need to turn it on to access this feature. To do that: 

  • Go to your WordPress dashboard
  • Access the ProductX Addon Settings. 
  • Scroll down and turn on the WooCommerce Variation Swatches.
WooCommerce Variation Swatches - Turning the Addon ON
WooCommerce Variation Swatches – Turning the Addon ON

Accessing the Settings 

After turning on the addon, the swatches settings option will be available for you, along with all other addons settings.

In the WooCommerce variation swatches, you can access various global settings using the ‘Gear’ Icon. Here’s a quick overview of the settings: 

  • You can enable or disable the tooltip. 
  • Change the Shape Style to either a circle or a square. 
  • Show or Hide the Label Background. 
  • Convert the variation type to a button. 
  • Change the Width (in Pixels) of the button. 
WooCommerce Variation Swatches - Settings (1)
WooCommerce Variation Swatches – Settings (1)

Note: Here is an example of the “Dropdown to Button” feature. If you choose to activate it, you will be able to see the following change:

Dropdown to Swatches
Dropdown to Swatches

There are other settings as well: 

  • Change the height of the variation button
  • Enable/Disable variation images in the product archive pages. 
  • Show the variation image from the product. 
  • Change the WooCommerce variation swatch positioning (6 choices in the dropdown)
WooCommerce Swatches - Settings (2)
WooCommerce Swatches – Settings (2)

Once you are done with global settings, you can save the settings. 

Change and Customize the Product Attributes

As mentioned earlier, the ProductX WooCommerce swatches work with variable products. In order to show the attributes of the variable products, you need to change and customize the product attributes. 

To do that: 

  • Go to Products > Attributes from your WordPress dashboard. 
  • On this page, you can create new attributes for the variable products or edit existing product attributes
Create New Attributes for Variable Products
Create New Attributes for Variable Products

We have added 2 attributes here, color and size. However, you can add new attributes and edit them. 

Adding Color Attributes for WooCommerce Variation Swatches
Adding Color Attributes for WooCommerce Variation Swatches

If you want to edit an attribute then click on the “Configure Terms” button under the terms section.  

You will be taken to the “Edit Attributes” page (for any specific attribute). 

Editing Color Attribute
Editing Color Attribute

We are here in the Color attribute section. You can add a specific color or edit a color as per your needs. 

Add Variations to the Variable Product 

Now is the time to add the product variations. In order to do that, you can: 

  • Go to Products > All Products from your WordPress dashboard. 
  • From here, you can filter the variable products using the Filter feature (it’s built into WordPress). 
  • Finally, click on Edit to add the product variations. 
Filter the variable products
Filter the variable products

This is a crucial part of product variation swatches for WooCommerce. Follow these steps carefully to add variations to your product. Here’s how: 

  • Click on Product Data and choose Variable Product. 
  • Now go to the Variations tab from the right menu under Product Data. 
  • Here you can add or edit variations automatically or manually. 
Adding Product Variations for a Variable Product

Note: We’ve added 2 color variations manually. You can add or edit different variations as per your needs. Once you’ve added the necessary information like an image, the price, and stock, you can close the tab by clicking on it and save the changes. 

  • Finally, update the product and see the changes in the front end.

Here’s a front-end view of the change where the product color changes with the color variation: 

Final front end output
Final front end output

Here’s another example of a product with both the color and the size attributes. The attributes in the product page look like the following:

Adding the color and the size attributes:

Adding the attributes
Adding the attributes

Changing and saving the color and size attributes:

Updating the variations
Updating the variations

Here’s the final outcome:

Variation Swatches with color and size attribute
Variation Swatches with color and size attribute

Check out the above-mentioned examples and the final outcome. We hope the examples give you a good idea about using the variation swatches.

Was this article helpful to you? Yes No