How to create great looking color swatches for your WooCommerce Variable Products?

Nenad Mihajlovic
Aug 3, 2018 · 3 min read

If your goal is to have a plugin that betters and improves customer product options selection, than let me commend you for making the right choose by purchasing Improved Product Options for WooCommerce. With a couple of simple steps and this plugin, you can amaze your clients! In this quick guide I will show you how to use this plugin to customize your attributes swatches when WooCommerce Variable Products are used.

How to create Variable Products in WooCommerce?

For this particular use, create a few Variable Products and assign registered attributes to those products. Thankfully there is already a great guide on how you can do this — “How to Create Variable Products in WooCommerce?”. What’s important here, is that you use the registered attributes, so I’m assuming that you’ve followed the guide thoroughly and navigated to Products>Attributes, created an attribute and terms, then just assigned those to your variations and voilà. If you’re doing this for the first time, you might find it confusing, but once you get used to it, it’ll be pretty simple and repetitive. What customers see now, if we take a look at our product, is a select box with options. Variable products can have their own thumbnail or price, which is pretty handy. What’s a bit undeveloped are the select boxes themselves. Let’s style those!

WooCommerce Variable Product with a default select box for choosing the product options.

How to style product swatches in WooCommerce?

Choose Attribute Swatch and click the Add Item + button to style an attribute
Select Attribute Color and click on the Paint/Cog icon to get the Terms Manager
Choose Type Color and style the terms! Click X to go back.
Click Save and you’re done!

See how easy that was. Couple of clicks and we’ve styled our attribute select box into a color swatch option! These are styled globally, so any product that uses this particular attribute will get the swatches in product pages. Let’s see how that looks.

WooCommerce Variable Product with active and set Improved Product Options plugin.

Further we can set thumbnails, buttons even HTML custom swatches. So, explore the options and you’ll have a wonderful set of swatches for your variable products! Simple select boxes will be a thing of the past! Here’s the direct link where you can get this plugin → Improved Product Options for WooCommerce at

P.S. These attribute swatches can be used with simple products too! How? Read more here → WooCommerce Simple Products attribute selection and extra options? Is it possible?

More demos? Follow this link → Improved Product Options for WooCommerce Demo Page

Get the Improved Product Options for WooCommerce!

This article is a re-post! Original article is here! Thanks!