[Woocommerce] How to use YITH WooCommerce Color and Label Variations

Among the small plugins in the YITH Essential Kit for Woocommerce #1 package that I introduced earlier, there is this plugin that probably many of you need, its purpose is to help you create color or label options, image as shown below.

All free Well, although the paid version will have more options, if you just need that, the free version is more than enough.

First you have to install the YITH Essential Kit for Woocommerce #1 plugin that I instructed earlier. Then you enter YITH Plugins -> YITH Essential Kit for Woocommerce #1 and find the plugin YITH WooCommerce Color and Label Variations to activate up.

The free version of this plugin will not have detailed options like the paid version, so go straight to the section Product -> Attributes to create.

Add color picker attribute

In the attribute creation section, you choose the attribute type as Colorpicker.

Then you go to the page to add the newly created attribute value.

And add each color value as shown below.

Do the same if you want more colors.

You end up adding it to a product with a variation like this tutorial. Results after adding to the product.

Add label style attribute (Label)

We create a product attribute of type label as follows:

And similar to above, we add value to it.

Result after adding some required values.

And of course, you also include it in the product the same way you would add a regular variant product. And here is the result after adding:

In case your label is too long but its frame is small, add the following CSS style.css (fix 30px to the width you want to stretch).

.select_option span, .select_option img {
width: 30px;
}

The remaining Image type properties, you guys do the same, the usage is no different, so maybe I don’t write more. Good luck.