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!
How to style product swatches in WooCommerce?
- Navigate to WooCommerce>Settings>Improved Options>Product Options.
- Choose Attribute Swatch then click the Add Item + button.
- Select Attribute Color that you’ve already made.
- Click the Paint/Cog Icon and Terms Manager will appear.
- Now, style the attribute terms! Choose style Color and set the term colors.
- Click X to close the Terms Manager. Then click Save!
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.
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 Codecanyon.net
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
This article is a re-post! Original article is here! Thanks!