Introduction

Variation Swatches for WooCommerce is an awesome plugin to create different variations of your products. If you are selling multiple variations of the same product such as different sizes, colors and other variants, this plugin is one of the ultimate needs for your website. This plugin also allows you to control the design and provides you with more options to style the way they appear on your website.

In this document you will find step by step guidance on how to use the product swatches and how to use this plugin to create variations of the products like different sizes, different colors, and labels as many as you can think about.

Installation and Activation

You can install the plugin in three different ways. Such as manual installation, installing directly from the WordPress repository and installig via the FTP clients.

Manual Installation

1. To install the plugin manually, you will need to download it from here
2. This will download a zip file on your local desktop
3. You will need to navigate to WordPress dashboard
4. Click on plugin > Add new
5. Click on upload plugin
6. Select the plugin from your local desktop by clicking on choose file 
7. click on Install Now

Once you have installed the plugin, it will automatically prompt you to activate it. Click on Activate plugin to activate it.

 Installing from WordPress directory

1. To install the plugin directly from the WordPress Directory, you will navigate to your WordPress dashboard
2. Click on plugins and select Add New
3. In the search bar, type Variation Swatches for Woocommerce
4. Ensure that the plugin is created by Brainstorm Force
5. Click on Install Now button to install the plugin

Once you have installed the plugin, it will automatically prompt you to activate it. Click on the Activate Plugin to activate it.

Install the plugin using FTP client

FTP clients are another option for installing the plugin. You must use FTP clients such as Filezilla or another similar type of FTP client. To start with, please download the plugin from here and follow the instructions below

1. Download and install any of the FTP clients like Filezilla
2. Enter the host name, username, password and the port number of your FTP account
3. Browse and access the folder wp contents/plugins
4. Upload the unzipped version of the plugin to this folder
5. Navigate to WordPress dashboard and click on plugins>installed plugins
6. Scroll down to find the plugin and click on activate

Starting out with Variation Swatches for Woocommerce

Let’s start by understanding how to set this plugin up with step by step process.

Step 1: Setting up attributes of the products

In order to use this plugin to create different variants, you will need to set up the different attributes that you need as a differentiator between the variants. For example, color, sizes and labels. Follow the steps below to set up the product attributes:

• First, navigate to the WordPress dashboard
• Click on Products and select attributes

• To add an attribute, first give it a name (i.e colors)
• Enter the slug of the attribute (i.e colors)

• Select the type of the attribute. As of now there are three different types that are available inside the plugin and they are color, label and image.

• Select the shape of the attributes. There are 4 different types of shapes are available such as default, square, rounded corner and circle.

By default the swatches will be designed as you customize them from the settings page as shown in the image below. You can change the shape of the swatches to rounded corner, square and round as per the requirement.

By default the size of the swatches will be selected as 24px. You can change the size by clicking on the box and entering the value of the pixels as per your requirement.

Finally, click on the Add Attribute button to add the changes to the site.

Step 2: Configuring the terms of the Attributes

Once the attributes are added, you will need to configure the terms for each of the attributes. You will need to click on the configure terms button next to each attribute.

In this example, we are going to configure the color options for a particular attribute. There are 4 options that you can select from. These options are the name of the color, slug of the color, a short description of the color and a color selector to select the color. Once you have selected the options as per your requirements, click on Add New button at the bottom to add it to the list.

You can add as many attributes as you need based on the requirement. Once you have added the terms, the final screen would like the below image.

Step 3: Setting up product variations

Now that the product attributes are set, you will need to select the product variations in order to display the variation swatches on the front-end of your website.

• To select the product variations, please navigate to the Products and click on All Products.
• Click on Edit next to the product on which you would like to set up the variations

• Under product data, select the product type as the Variable Product

• Click on the Attribute tab and select the attributes that you would like to be included in the front-end and click on the Add button to get them added to the list

• Once the attribute is added click on the Select All button to add all the variants to the product.
• Ensure that the Used For Variation button is checked
• Click on the Save Attribute button to save the changes

• Once the attributes are saved, you will need to set the variation in the product. To do that, please navigate to the Variation Tab.
• Click on the Go button to create the variations
• This will add the variation to the product based on the attributes that you have selected earlier

• You can also set a custom image and price for this variant by opening the drop-down menu
• Select the variation by clicking on the drop-down menu
• Add a custom price for this variant by entering the amount in the Regular Price field
• Add an image by clicking on the image button
• Repeat the same process to another variants

Once you are done editing the field, click on Save Changes button at the bottom and update the product.

Basic Settings

Once the plugin is installed you will need to manually set it up in order to get the customized and desired results on your WooCommerce products. To access the settings, you will need to navigate to the WordPress dashboard and click on plugins>installed plugin. Scroll down to the plugin and click on settings to access the settings page.

General Settings:

Under general settings, you will find three options which are mentioned below:

1. Enable for product page: This will enable the features of the plugin in the single product page where the plugin will show the variants available for a particular product
2. Enable for Shop Page: This will enable the users to select the different variants of the products directly from the shop/archive pages
3. Auto convert the drop downs to labels: Enabling this feature will automatically convert the drop-downs to labels

Global Styling:

Under the global styling options, you will be able to customize the swatches as per your requirements and style segments. Following are the options available:

Swatch Styling

Swatch minimum width:

By default the minimum width of the swatches are set to 24px. You can change this by clicking on the arrows or by manually typing the number of pixels inside the box.

Swatch minimum height

By default the minimum width of the swatches are set to 24px. You can change this by clicking on the arrows or by manually typing the number of pixels inside the box.

Swatch border radius

The border radius is by default selected as 3px. You can change this by clicking on the arrows or by manually typing the number of pixels inside the box.

You can customize the swatches as per your requirements by changing the default value to any value. Please note that the global setting will only be applied to the product if the product attribute settings is set to default. Changing the height, width and the border radius to the same value will change the shape of the swatches as circles.

Font size

The font size of the swatch is by default selected as 12px. You can change this by clicking on the arrows or by manually typing the number of pixels inside the box.

Please note that you can change the font only for the label attribute. This does not work for the color or the size attributes.

Border color

You can use the color selector to chose the border color of the swatch as per your requirement.

Disabled attribute effect

This option will help blur the disabled attributes so that the users can not select the same attribute. There are three major options that you can choose from which are blur, blur with cross and hide it completely from the front end of the website.

Tooltip Styling

Tooltip is the option that helps pop up the name of the label, color or the size attribute when the user hovers the mouse cursor over them. There are the following options that you can choose from to customize how Tooltips appear on your website. You can simply choose to turn this option on or off by using the toggle button.

Front End view of the Tooltip

Tooltip background color

This option will help you customize the background color of the tooltips. In this example, we have set the background color as red.

Tooltip font color

This option will help you customize the font color of the tooltips. In this example, we have set the background color as white. You can change this by clicking on the “Select Color” option.

Tooltip font size

This option will let you change the font size of the tooltip. By default this is set to 12px. You can change it by entering the custom value in the box or using the up and down arrow adjacent to it.

Image preview on tooltip

Image preview will be shown in tooltip if this option is enabled, This setting works only for image type swatches

Label Styling

Label position

This option will help you in positioning the label on the product page. Currently there are three settings available to this function. They are None, Inline and stacked.

Inline: Inline settings will position the labels in the same line as mentioned in the image below:

Stacked: this option will stack the label below the tag as mentioned in the image below

Label font size

This option enables the users to change the font size of the labels

Widgets Styling

Filters

Enabling this option will add the swatches to the filter option of the woocommerce that means the users can use the filter option to choose from different swatches on the product archive page.

Shop Page Styling

To design and style the swatches on the shop page of your website, we have incorporated a few cool styling options.

Swatch Alignment

This option enables you to change the alignment of the swatches on the shop page. Currently, there are three different styles available as left, right and central.

This is how it looks on the front-end with a right alignment of the swatches

Swatch Position

This option enables you to change the position of the swatches on the shop page. Currently there are 4 different positions that you can place the swatches on the shop page and they are After Price, Before Price, After Title and Before Title.

Here is an example of how this looks on the front-end of the website when you place the swatches before price

Show Swatches Label

Turning this toggle button on will display the labels for the swatches on the shop page. As you can see in the image below that the color and label are visible stacked to the swatches.

Attributes limit

You can limit the number of attributes that would be displayed on the shop page using this option. You can either leave it blank or enter 0 in the box to load all the attributes. You can choose any number of attributes that you would like to display on the shop page.

Fron-end view

Override global settings

This option overrides any global setting inside the plugin and allows you to set customized width, height, border radius and font size inside the shop page.