03 Aug

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

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?

  • Navigate to WooCommerce>Settings>Improved Options> Product Options
  • Choose Attribute Swatch then click the Add Item + button
Choose Attribute Swatch and click the Add Item + button to style an attribute
  • Select Attribute Color that you’ve already made.
  • Click on the Paint/Cog icon and Terms Manager will appear.
Select Attribute Color and click on the Paint/Cog icon to get the Terms Manager
  • Now, style the attribute terms! Choose style Color and set the term colors.
Choose Type Color and style the terms! Click X to go back.
  • Click X to close the Terms Manager. Then click Save!
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 products! Simple select boxes will be a thing of the past! Get Improved Product Options for WooCommerce now! Here’s the direct link → Improved Product Options for WooCommerce at Codecanyon.net

Get the Improved Product Options for WooCommerce!

3 thoughts on “How to create great looking color swatches for your WooCommerce Variable Products?”

Leave a Reply