Display variations as colors, labels or images in WooCommerce


Product variations are one of the indispensable elements in many online stores, allowing you to offer your items by size, color or any variety you have.

But at some point in the life of your online store, you might want to go a step further, and replace the usual dropdown, even the buttons, with something more eye-catching, that visibly helps the customer to distinguish between one variation and another.

So, can we interest you in something like this?

yith variations

We will use a plugin, that’s what they are for, and there are very good ones, of course, those that are good are usually paid, do not waste your time with free plugins for variation swatches, they are very limited, they only allow you to change buttons or text labels at best.

YITH WooCommerce Color and Label Variations

My favorite plugin to convert the simple dropdown of product variations of WooCommerce to something more attractive and easy to select for the customer is this one from Yith, because it is so easy to use.

As soon as you install and activate it you must configure the attributes to indicate how you want to display them, and for that, you must assign them to an attribute type, and you can choose between:

  • Colorpicker – Displays a color for each term you create for the attribute.
  • Label – You can create a text label that identifies each term of the attribute.
  • Image – You can choose an image for each term of the attribute.

You can do this when creating a new attribute…

yith attribute type settings

Or in those already created by editing them…

yith attribute type settings inside attribute

From this moment is when you can start to apply your magic, applying colors, labels to the attributes you have defined, as in the following examples.


If you notice, in the color selector for an attribute you have the option to add more than one color, which serves to show the customer that what he is choosing is a combination of colors.

An example of how it can look in a product:

yith colorpicker product


If you want the different terms of the attribute to be labels, it is just as easy, simply create or edit the terms and assign them the label of your choice.

The labels will be displayed on the product instead of the dropdown.

yith label product


In case you want the sample variation to be an image, either edit the terms already created or add them, whatever you need in each case.

The optional tooltip field is to show the popup image when hovering over the image type selector.

You can see it here.

yith image product

As I was saying, hovering over a variation displays the default image you selected for that attribute. But you don’t have to do it that way…

You can also choose to add the image(s) for each specific variation when editing the product.

yith image settings inside product

As you can see, a very complete plugin, which allows you to display the variations of your products in a visually appealing way.

Finally, although it is not mandatory, because the plugin works well with the default settings, in its settings you can change some aspects of its display, such as the colors of the popup images, if the out of stock variations will be hidden or blurred, or even if you want the different variations selectors to be displayed only on the product page or throughout the store.

yith variations settings
yith single variations settings


  • Product level configurations
  • Demo as administrator, to be able to do real-time tests


  • Price (79,99€/year)
  • Configuring each type in each attribute/term can be a bit tedious if you have a lot of them.

How useful was this post?

Click on a smiley to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top