Product Variation Swatches for WooCommerce

9 min readNov 28, 2018

The WooCommerce Product Variation Swatches allows you to configure & display product variations visually. The plugin gives the following swatch types

Radio
Color
Image/Icon
Label/Button

You can access the WooCommerce Product Variation Swatches settings from Dashboard → Products → Swatches options after installing & activating the plugin.

Product Variation Attribute

Attribute for a Product Variation is decided by following fields.

Attribute Name — The field name to identify an attribute. It should be unique.
Attribute Type — By default for Woocommerce the available type is SELECT. Using Woocommerce Product Variation Swatches, you can choose the different type of attributes. Available types are Color, Image, Label and Radio.
Term Tooltip Type — Tooltip type allows you to choose the type of tooltip for a term. The available types are Image, Term Name, Description and None.
Icon Properties — The display icon for each attribute can be styled. You can decide on

Icon height
Icon width
Icon roundness (If you need a round or soft curved square icon)

Border Colour: The border color for each attribute item can be custom decided.
Border Color on Hover: The border color when the mouse hover.
Border Color on selected: The border color when a selection is made.

Swatches Types

The WooCommerce Variation Swatches display variations of products based on the type of attribute.

The swatches types are listed below.

Color swatches for product variation attributes
Color swatches would give you the color picker to decide a color (Red, Blue, Green etc) for the terms.
On the website front-end it would be displayed as a color palette for each variations.

Image/Icon swatches for product variation attributes
Image swatch would give you the image upload option, where you can upload a product variation image or icon.
On the website front-end, the uploaded image/icon will be displayed as swatch for the product variation.

Label/Button swatches for product variation attributes
Label swatch would give you the Label name to be used as a swatch. Giving a background color (styling) will also let you display the label as a button.

Radio Swatches for product variation attributes
Radio swatch would give you the radio button style for the variation. You can give Label name for Radio button.

Tooltips For Product Variation Swatches

Using the WooCommerce Variation Swatches, you can now set Hover element for each WooCommerce product variations.

The hover style can have any of the below type,

Image
Description
Label Name
None

Each of the above need to be added to a variation term when they are getting added. Refer Section 3 (b)

Advanced Options

Stock Left Label
If you wish to alter your customer on minimum stock of any of your product is left. You can use this feature to set the Stock left label along with the count that is left. Stock Left label works for single level product variation as well as multi-level product variations.

Out-of-stock information display style
You can choose on how to display when a product variation is not available. Using the plugin you can decide to have,

Blur the variation swatch along with a red cross

Just blur it out the unavailable variation swatch

Hide the unavailable variation swatch

Variation Swatches on Shop page
Using the plugin, you can display the variation on the Shop page along with the Product Page.

Configure A Custom Swatch Type For An Attribute

Go to Products → Attributes.
Using the Add New Attribute Section, you can add in the new attribute. Fill in desired attribute name
The slug field can either be left empty or can be added as per your preference.
Choose the attribute type from the type drop-down. You can choose any other attribute type (Color/Image/Label/Radio) from the drop-down menu.By default, the value would be Select.
Click on Add Attribute button to add the attribute.

After Saving the new Attribute type, you are now ready to configure the terms for attribute.

Configure A Term For An Attribute

Go to Products → Attributes
You can view the available attributes already created or can create a new attribute [Refer Section 2(a)]
Select Configure term from the newly created attribute to create variations of the attribute.

For a term, you have following fields to update/edit:
Name
Slug
Description
Term Image
Tooltip Image
Tooltip Description
Tooltip Image and Term Image can be uploaded by Upload/Add Image button. You can then choose the term images from the media library or drag-n-drop the image to media library from your computer.
Click on Update button after adding in the respective data to save the term.

Note:
When the attribute type is Color, instead of Term Image it will be Term Color

Configure The Display Style Of An Attribute Swatch

You configure display style for the Attribute on your product page. Themehigh WooCommerce Product Variation Swatches gives you 2 way of styling, Global Setting or from Swatch Properties.

Global Settings (Default) for styling will be applied to all Product Variation Swatches if you haven’t overridden the style of any particular Variation Swatch from the Swatches Properties.

Configure From Global Settings (Default Style Settings)

Go to Products → Swatches Options → Global Settings → Attribute Settings

Attribute Settings

You can configure the default style for Swatches from this section.

Icon
Height
Width
Roundness

(Unit Values accepted in px, em, % etc, if no unit mentioned would take px as default)

Icon Border Color
Icon Border Color On Hover
Icon Border Color on Selection

Choose the color for all 3 status to define unique look to distinguish the user actions.

Other 2 sections that fall under Global Settings are,

Tooltip Settings
Other Settings

Refer Section 2(f) & 2(g)(h)(i) respectively to know more on these sections

Configure Display Style From Swatches Properties (Override Global Settings)

Go to Products → Swatches Options → Individual Attribute Settings (tab)

You can view the list of attributes already available in your woocommerce product website. Navigate to action column for the edit icon.

On the edit screen for an attribute you can view/configure Swatches Properties/General Settings

Attribute Name (Not Editable)Attribute name would be same as the one you saved while creating the attribute
Attribute Type (Not Editable)Attribute type would be the same as the one you save while creating the attribute. Attribute type can have Color, Image, Label and Radio as value.
Override Global SettingsYou have a checkbox that would help you decide if you want to override the Global Settings
Term Tooltip Type (Mandatory)Tooltip type allows you to choose the type of tooltip for the term.
The available types are

Image
Term Name
Description
None

NOTE:
If no data chosen for tooltip type, it would be None by Default.Based on the tooltip type chosen, the corresponding data should be added while a term is getting configured. Else, no data would be displayed on hover even when you choose a tooltip type.

Icon Properties

Icon height: Enter the height value
Icon width: Enter the width value
Icon roundness: Enter the value required border-radius.

NOTE:
The icon properties will support px, em, % etc as units. If no unit is entered, it would use px

Default Border colour: Define the color for the Icon border.
Border Color on Hover: Define the border color when the mouse is hovering over the icon
Border Color on selected: Define the border color when an item is selected.

Configure A Product Variation

Go to Products → All Products → Add New.

Go to Attribute, section click on the Custom Product Attribute drop down. In this drop-down choose the attribute that you have been created earlier that is global attribute. ( For eg: Image).

Select the attribute and click on Add button.
Click on Select All button to select all variations of the image attribute or Click on Select None button to deselect all variations.

Click on Save Attributes button after making necessary changes
Navigate to Variations tab. Choose to Create variation from all attributes from the drop down and click on Go button all available variations will be listed. Set the variation image by clicking the image icon and uploading the image from the media library.

Set variation price and other variation details and Click on Save changes Button after making all necessary changes.Add all required details in each variation.

Adding a Local Attribute (used for Variation), can also be done from the Product Page. But this would have Default Woocommerce function, and type of attribute would beSelect.

Note:
Adding a Product Variation works as default woocommerce functionality.

Add A New Term For An Attribute From Product Page

From Products → Edit

Go to Attribute, choose the Attribute to which you want to add the new term.
Click on Add New, fill in the Term name and Term Image/Color (based on the attribute type)

Click on “Save Attributes” button after making necessary changes

To configure the Tooltip Configurations for the term, you will need to navigate to Products → Attributes → Configure Term

Choose the newly added Term & Upload the hover image, Hover description etc and Update to Save changes

Configure Tooltip Styling

Woocommerce Product Variation Swatches lets you customise Hover Image-Border color & Term name-Background color.

Go to Products → Swatches Options → Global Settings → Tooltip Settings

Tooltip Border Color → Choose the color from the Color picker
Tooltip Term Name Background Color → Choose a background for the hover tooltip term name.
Save changes to confirm the change made