View Product Page


To have access to the plugin settings dashboard go to YITH -> Color and Label Variations.

General settings

In this section, you can configure the following options:

  • Attribute behavior: choose attribute style after selection. You can either hide or blur the not-selected attributes.
  • Enable Tooltip: if this option is enabled, you can add a tooltip for each attribute created.


  • Tooltip position: show the tooltip either above or below the selected attribute variation
  • Tooltip animation: animation of the tooltip (Fade in/Slide in)
  • Tooltip background: background color of the tooltip


  • Show attribute description: show/hide the description for each attribute on the product detail page
  • Enable plugin in archive page: this allows you to show product attributes even in archive shop page

general settings 2


  • Form position: place form before or after Add to cart button
  • Enable AJAX form in archive pages: AJAX handling for the variations form
  • Label for “Add to cart” button: enter here the text to show in “Add to Cart” button when a variation has been selected in shop page
  • Change product image on hover: change the product image when the mouse hovers the concerned attribute.
    Please note: the feature is available only for the products which have a single attribute per variation configured
  • Show custom attributes on “Additional Information” Tab: show custom attributes style on “Additional Information” Tab instead of simple text.

additional info

Configuration of terms

Once you have created an attribute, you have to add variations of it. Click on the button shown to enter the first variation.

Configure terms

To add a new color, specify the following required options:

Color options

  • Name: color name (shown in frontend)
  • Slug: slug for attribute variation
  • Description: description associated to the attribute variation, shown in the front end
  • Colorpicker: choose the colour you want to assign to the current attribute variation using a colorpicker
  • Tooltip: tooltip associated to the attribute variation and shown in the product page

You need to specify {show_image} for the attributes of image type in “Tooltip” entry if you want to show as tooltip the selected image preview for that specific term.

Tooltip view


In our example, we have entered the following colors:

  • black
  • blue
  • grey
  • orange
  • purple


You can create new product variations directly from the product detail page.
Open a product and, after adding an attribute, click on Add New to add a new variation.

Add new

In our example, the attribute type is “colorpicker” and, therefore, in the modal window that opens we will have to add colours for the new variation.

New attribute term

The plugin allows configuring a term for the attribute by matching two colors.

Click on the specific button to select the second color.


Creation of attributes

YITH WooCommerce Color and Label Variations allows you to create custom attributes for your product variations.
In this page, we will configure attributes together step by step, so that the way to do that will be as clear as possible.

Click on Products > Attributes and you’ll see a page like this.Edit attribute

To create a new attribute, you have to fill the following fields:

  • Name: name of the attribute displayed in the front end
  • Slug: slug of the attribute (maximum length: 28 characters)
  • Enable Archives: enable this if you want this attribute to have product archives in your store.
  • Type: attribute type. Besides standard WooCommerce types, the plugin adds attribute types: Colorpicker, Image and Label.
  • Default sort order: order to sort attribute terms
  • Description: attribute description

In the example we are going to show you, we have chosen “colors” attribute

Color type

Add attributes to the product

To associate the attribute “Colors” to the product, do exactly as you would do for any other attribute belonging to WooCommerce types.
Add the new attribute and values in the section Attributes on the product page.


You can now configure the product settings through the created color attribute. There is an option to add a different (separated) image gallery for each of the product variations. In this case, each color will have its own image gallery.

color variation images

The customers will see a different image gallery for every color they pick:

product page frontend


Attribute type

Attribute type

New attribute types which the plugin allows to use, in addition to WooCommerce standard ones, are colorpicker, image and label.
Shown below you will find a pattern of each listed type.


color picker


label picker


image picker

Single variations

To show single variations on WooCommerce archive pages go to the “Single Variations” tab and select “Show single variations in loop”.

single variations

If you “Hide parent products” in loop when single variations are shown, only the variations of the product will be visible, as you can see in the example below:


If you want to keep the order and show the same products sequentially, enable the “Order products by ID” option.

YITH WooCommerce Ajax Product Filter

YITH WooCommerce Ajax Product Filter allows filtering the product list basing on their attributes or price. The filter is applied by Ajax, therefore without the need to refresh the page to show the search result.

The combined use of these two plugins allows using colors, labels, and images configured with YITH Color and Label Variations for your terms when creating filters of Color swatches and Label/Image types.

Integration with YITH Ajax Product Filter 1

Specifically, by disabling the option Customize terms, the plugin will recover the options configured for the terms with YITH Color and Label Variations.

Attributes configured with YITH Color and LabelCustomize terms with YITH Color and Label

When enabling the “Show shingle variations in loop” option in the Color and Label plugin, each variation will be shown as a separate product.

show products in loop

The filter will also be applied in this case, and will show all product (variations) that match the filter.

Filter products in loop C&L

For further details about YITH WooCommerce Color and Label Variations, please refer to the official documentation.


YITH WooCommerce Compare

YITH WooCommerce Compare offers users the chance to compare two or more products in the shop, to choose the one they really want. This information is shown in a modal window and products can be grouped by category.

Compare integration

Combining the two plugins will make it possible to also compare these single variations in archive pages, like in the example above, where we compared two of the same hoodies but in different colors.

To make them work together, you will only have to activate both plugins and set them up as you wish. For more information on how to set up the YITH Compare plugin, check the documentation here.

YITH WooCommerce Wishlist

YITH WooCommerce Wishlist is a plugin that allows your customers to arrange the products they are interested in one or more wish lists. This process allows them to ‘save’ these products, turn back to them at a later moment and eventually proceed to purchase them.

wishlist clolor label

By activating both of the plugins, customers will be able to add to cart the variable products they have added to their wish list. They can select the variation they are interested in, in the wishlist.

YITH WooCommerce Added to Cart Popup

Thanks to YITH WooCommerce Added to Cart Popup you can enable an automatic popup to notify the user about the updated cart content. Every time a product is added to the cart the popup automatically opens.

The combined use of these two plugins allows users to choose the variation of the products directly from the modal window.

To do it, you need to install activate both plugins on your e-commerce site (both premium version).

For further details about YITH WooCommerce Added to Cart Popup settings, please refer to the official documentation.