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?
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…
Or in those already created by editing them…
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.
Colorpicker
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:
Label
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.
Image
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.
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.
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.
Pros
- Product level configurations
- Demo as administrator, to be able to do real-time tests
Cons
- Price (79,99€/year)
- Configuring each type in each attribute/term can be a bit tedious if you have a lot of them.
