Product Attributes

Custom Attribute Swatches

Create custom attribute swatches and set them individually for single products

Label Ideal attribute for sizes, weight and much more.
Color Use included colorpicker to define colors you exactly need.
Image Any variations you want based on the pictures added.
Button Attribute with almost unlimited possibilities whenever needed.

Create Attribute

At the very beginning, we have to create image attribute and its variations globally. To create image attribute globally, navigate to Products >> Attributes. As we’ll create image attribute for our product. Fill the name field with your desired attribute name. In this tutorial, I’ve termed attribute name: Image.

You can leave Slug field empty. It automatically generates the slug for the attribute. From the Type dropdown select Image attribute type. When the mandatory fields are filled, select Add Attribute button.

After creating attribute, you will notice a list is created in the right side. Check the following screenshot.

Even this plugin has been installed and activated on your site, variable products will still show drop-downs if you’ve not configured product attributes.

Click to that Type selector to change attribute’s type. Besides default options Select and Text, there are more 3 options Color, Image, Button/Label to choose.
Select the suitable type for your attribute and click Save Change/Add attribute
Go back to manage attributes screen. Click the cog icon on the right side of attribute to start editing terms.
Start adding new terms or editing exists terms. There is will be a new option at the end of form that let you choose the color, image or choose as a button for those terms.

If it needs to activate image, color and label swatches on existing variable products, you can give a go from here. Check the following screenshot. The default variation select drop down, would be turn into swatches.

Editing Attribute:

Head to the Products >> Attributes. All existing global attributes are listed in attribute section. After installing WooCommerce Variation Swatches plugin, it adds Type field. By default it would show select under Type title.

As WooCommerce Swatches Plugin comes with Three attribute types: Color, Image, Button. You can set any of attribute type for your desired attribute.

For demonstration purpose, Fabrics, Pattern and Label attribute has been created. Add Color attribute type for Pattern attribute, Image attribute type for Fabrics attribute and Button attribute type for Label Attribute.

To set color attribute type to color attribute, click on Edit.

Select Color Type from the type drop down.

Get back Products >> Attributes. Edit Image attribute like Color attribute.

Get back Products >> Attributes again. Edit Label attribute like Color and image attribute.

When attribute type selection is completed, get back to the attribute list page. The Attribute list look like the following image.

The front of the first product image would look like the following screenshot.

Label looks fine, but attributes for Pattern needs to define colors and attribute for Fabrics need to add swatch images.

How to add/edit product attributes

Set global attributes

Go to Products > Attributes to add, edit, and remove attributes.

Here you can quickly and easily add attributes and their terms.

Add a Name.
Add a Slug; (optional); this is the URL-friendly version of the name.
Enable Archives if desired. If enabled, you can view a page with all products having this attribute. For example, if you have this enabled, and “black” is one of the options under “color”, you can add http://yourstore.com/pa_color/black/ to your menu to only display black clothing – pa stands for “product attribute.”
Select a Default sort order. Choose between “Name”, “Name (numeric)”, “Term ID” or “Custom ordering” where you decide by dragging and dropping the terms in the list when configuring the terms (see below). “Name (numeric)” is relevant if the values are numbers. If you select “Name”, it sorts alphabetically with 1 and 10 preceding 2. If you select “Name (numeric)” it sorts based on numerical value.

Select Add Attribute.

The attribute is added in the table on the right, but without values.

Select the “Configure terms” text to add attribute values.

Next Add New “Attribute name”, where “Attribute name” automatically takes the name you gave the attribute in the previous step.

Add as many values as you wish. If you selected “Custom ordering” for the attribute, reordering your values can be done here.

After selecting Configure terms, a list of attribute variations comes up. For Pattern, three variations: Blue, Green, and Red variations are list here. Edit each variation one by one to add variation color. For demonstration, select Edit link for Green attribute.

From variation edit panel. Select desired color from Colorpicker and update the changes pressing Update button.

After updating pattern attribute variations, edit Fabrics attribute selecting Configure terms like pattern attribute.

After pressing Configure terms a list of Fabrics term comes up like pattern. Edit each variation to insert variations image. For demonstration purpose, Edit link for Chambray attribute.

From variation edit panel. upload desired variation image from image and update the changes pressing Update button.

After updating images for all variations, the frontend would like this the following screenshot.