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 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 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
Tooltip view

 

In our example, we have entered the following colors:

  • black
  • blue
  • grey
  • orange
  • purple

Colors

You can create new product variations directly from 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 to configure a term for the attribute by matching two colors

Click on the specific button to select the second color.

Colorpicker
Bicolor

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 front end
  • Slug: slug of the attribute (maximum lenght: 28 characters)
  • Enable Archives: enable this if you want this attribute to have product archives in your store.
  • Type: attribute type. Beside 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 in product page.

attributes

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 wil see a different image gallery for every color they pick:

product page frontend

 

Attribute type

Attribute type

New attribute typologies 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 typology .

Colorpicker

Attributes view

Label

Label

Image

Image