Variable products in WooCommerce are a very powerful feature, but the user interface used to add products is a bit basic and it can be hard to communicate to users exactly how their choices will affect the final product they buy.

Color Swatch Plugins allow us to create a richer user interface for variable products, which hopefully helps users to make a more informed buying choice. In this article, we’ll take a look at a number of Color Swatch Plugins and see how they can help us to sell more products in our stores.

What Features Should I Be Looking For in a Color Swatch Plugin

The Swatches

The variable product screen in WooCommerce typically contains a number of drop-downs so you can choose your desired product options.

Whilst the drop-downs are functional they can seem a little drab, and sometimes things can be communicated better using pictures instead of words.  The ability to replace drop-downs with other more visually pleasing UI elements has to be at the heart of any color swatch plugin.

Swatch Options

When thinking about a swatch plugin we may immediately think about replacing a drop-down that contains color names with a series of swatch buttons.

But there are other ways to replace a drop-down, maybe instead of describing things in a drop-down, you could provide the user with pictures of the different options. Or maybe you’d like to replace drop-downs with radio buttons, or a series of buttons.

You should consider the way you want to present your product options and then check that a plugin can do what you require.

Tooltips

As well as giving more information in the interface, you can also provide more information to the user via tooltips.

Let’s imagine your selling massage tables, and you offer a small a medium and a large size. Lots of customers may wonder about the dimensions of each of your tables, rather than sending them scrolling down the page looking for more info you could provide the information in a tooltip so they can see it instantly.

Many plugins offer the ability to add tooltips and some offer more elaborate options such as controlling the times it takes tooltips to fade in/out.

Get a Product into a User’s Basket in Fewer Clicks

For a user to add a variable product to their basket they need to –

• Find the product in the shop
• Access the product details screen
• Choose the product attributes
• Add the product to their basket

Some plugins allow you to add the product attributes/swatches to the shop screen, so users can choose the attributes they require and add the product directly to their baskets. Fewer clicks for users could easily lead to increased sales in your shop.

Product Galleries

One of the key features of the product page is the product gallery, and many swatch plugin gives you increased configurability over this area.

Allowing the user to see what they’re buying and to show images that reflect their product choices could be a real sales magnet.

Change Prices Depending on Product Options

Some plugins allow product prices to be changed based on the options selected.

Imagine you were selling pictures with silver and gold frames, but the gold frames cost an additional $25, it’s not easy to add that sort of functionality to your store but some swatch plugins provide it out of the box.

Add Search Filters

Some plugins allow the user to filter the products they view in the shop using the swatches they create.

Help to Import Data

Adding extra images to options/image galleries can lead to an overhead of having to add more images for each product you add.

Some plugins take away this burden by providing additional import options.

 

Yith Woocommerce Color And Label Variations

The Yith Woocommerce Color And Label Variations plugin can be downloaded from the Yith website, the plugin is available in free and premium versions.

The free version of the plugin adds color, image and label swatches so if you’re looking to add basic swatch functionality to your store the free version of this plugin could be a very good choice.

The premium version of the plugin allows attribute swatches to be added to the shop and product pages, once attributes have been chosen from the shop page then products can be added directly to the cart without having to access the product details page.

The premium version of the plugin offers tooltips for each attribute and it is possible to configure the position and animation of all of the attribute tooltips.

The plugin also allows a unique image gallery to be created for each variation added.

The plugin displays all relevant attribute data in the additional info area of the product screen so your customers can see exactly which options are available. This functionality can be turned off if required.

One notable feature in the premium version of this plugin is the “single variation” option, this allows each individual variation for a product to show up as a separate item in your store. So rather than the user having to select options from the shop or product screen they can view each variation as if it was a normal product.

If you want to find out more about the plugin then Yith provides a very comprehensive information page, a live demo, and full online documentation. Yith also provides a 30-day money-back guarantee on the premium plugin.

You can view the latest prices for the Yith Woocommerce Color And Label Variations plugin here.

Get the Yith Woocommerce Color And Label Variations plugin

The Color and Image Swatches for Variable Product Attributes

The Color and Image Swatches for Variable Product Attributes by Phoeniixx is available from wordpress.org and also directly from the phoenixx website, at the time of writing it was last updated 1 month ago. The plugin is available in both free and premium versions.

The plugin allows the user to create swatches and then display them on the product page, the plugin restyles the main image area, as well as providing color swatches for clour based attributes it also provides buttons to show non-color based attributes

The screenshot above is taken from the demo site for the free version of the plugin that you can find here.

The premium version of the plugin allows the product choices to be displayed on the shop screen as well as the product screen.

Once the attribute options are displayed on the shop screen the customer is able to choose all of the relevant options from that screen and then add the item directly to their cart, this saves clicks and could easily increase sales in your store.

The premium version also gives the option of creating swatches using images, as an added bonus the plugin comes with a library of 300 icons. Thepluginalos provides the option of creating bi-color swatches so your customers can easily view the color combinations you provide.

If you want to find out more about the plugin the author provides a live demo, as well as comprehensive documentation.

You can view the latest prices for the Color and Image Swatches for Variable Product Attributes plugin here.

WooCommerce Attribute Swatches

The WooCommerce Attribute Swatches plugin by Iconic WP can be downloaded directly from the Iconic WP website, there is no free version of the plugin but Iconic provides a 30-day money-back guarantee so you can test the plugin with no financial risk.

The plugin allows attributes to be added to the product and shop pages, the plugin makes it possible to update product images on the shop page depending on which swatch is selected. The plugin is also able to populate the product page based on the choices the user makes on the shop page.

The plugin allows swatches to be set up as colors, images, text and radio buttons

A neat feature of the plugin is that it allows you to display when a product is not available as a certain combination in a pleasing and intuitive way

You can see from the image above how clear this will be for your users.

The plugin also provides an option to filter by swatches on the shop page, so once you have set up a swatch you can add a filter to the shop page which will allow the user to filter products based on the attributes in the newly defined swatch.

The plugin also provides functionality to set prices by attributes, so it would be possible to set up a wrapping attribute with options of “Fancy”, “Normal” and “None” and then set a price for each option. The price would then bee added to the product’s cost depending on which option they chose.

If you want to find out more about the plugin then Iconic provides a comprehensive walkthrough video, a demo and a page that fully lists all of the features of the product.

You can view the latest prices for the WooCommerce Attribute Swatches plugin here.

WooCommerce Variation Swatches and Photos

The WooCommerce Variation Swatches and Photos plugin is the official WooCommerce swatch plugin and can be downloaded from the WooCommerce website, the plugin does not have a free version but WooCommerce provides a 30-day money-back guarantee so you can test the plugin for a month before deciding to request your money back.

The first thing to note about this plugin is that it does not allow variation information to be displayed on the shop screen, it only allows attribute swatches to be added to the product screen. So the plugin does not change the UI experience for adding variable products to the basket, shoppers must still click through to the product page and choose their options.

As the plugin title suggests it allows colors and images to be used to be selected from the product screen

The plugin also allows variation options to be set-up and chosen via radio buttons

The sizes of images and swatches are fully configurable via the plugin’s admin interface. The plugin also allows labels to be added to the color and images swatches.

The plugin allows swatches to be set-up globally, and against specific products, so it is possible to create swatches that only apply to single products in your store. This also means that if you do have a swatch that you want to use across many products it only needs to be set-up once.

If you want to find out more about the plugin then Woocommerce provides an information page, a live demo, and full online documentation.

You can view the latest prices for the WooCommerce Variation Swatches and Photos plugin here.

Final Thoughts

Adding the right Color Swatch plugin to your store can really add to your selling power, and some plugins come with a surprisingly rich array of options and features.

Do you know of a good Color Swatch plugin that we should add to our round-up? Or maybe you have a question about one of the plugins above. Please don’t hesitate to let us know in the comments.