How to add color swatches to a WooCommerce product

In a standard WooCommerce setup, product attributes such as color are displayed as bland text. Discover how to make your product attributes much more visually appealing and informative with the help of visual swatches.

While millions of store owners choose WooCommerce to sell their products, some of the default features aren’t exactly awe-inspiring. One such feature is the color options on product pages.

Out of the box, WooCommerce offers customers the opportunity to choose colors from a text-based dropdown menu. While it “does the job”, there are much more attractive ways to display your most important product attributes.

By adding eye-catching color swatches, you can deliver a much improved customer experience and potentially net more sales as a result.

With that in mind, this article will walk you through a step-by-step tutorial explaining how you can add color swatches to your WooCommerce store. We'll do it using the excellent WooCommerce Attribute Swatches plugin by Iconic. This will replace the variation dropdowns with color swatches on your product pages.

I'll also show you how to use the WooCommerce Product Filters plugin to let customers filter products by color swatch.

Why add color swatches to your WooCommerce store?

1. Deliver high-quality visual information to help customers make an informed choice

While there’s nothing inherently wrong with the default setup for displaying color options in WooCommerce, it’s not as user-friendly as it could be.

For instance, offering the color ‘Blue’ on one of your t-shirt products drop-down menus doesn’t give the customer much information to work with. They don’t know what shade of blue it is for example and could end up dissatisfied when the product arrives.

Even if you added an extra word to describe the shade of blue your t-shirt is, opinions differ. Not all navy blues are the same. Again, a shade such as ‘electric cherry’ sounds exciting but doesn’t indicate the actual appearance of the color.

By adding WooCommerce color or image variation swatches, you give your customer the option to view the color as it is, helping them make an informed decision. This is bound to deliver a better user experience on your site, driving up consumer satisfaction.

2. Increase your sales with eye-catching swatches

Color swatches also increase sales because they’re eye-catching and draw attention to your color variations.

With a generic, text-based drop-down menu, customers may not even consider alternative color options for your product, preferring to purchase variants accompanied by images instead.

However, with a bright array of colors to choose from in a prominent location on the product page, the sales of your product variations are bound to increase.

So if you want to up your product attribute game, how can you install these visually appealing options to your WooCommerce store?

3. Provide a more visual way for customers to find products by color

Remember the last time you were searching the web for an item of clothing in a particular color. I expect that you used the filters on the shop page to click on the color you were looking for, and instantly narrow down the list by that color.

This is a common feature in nearly all major ecommerce clothing stores. As a result, it's very strange that most WooCommerce stores don't have this feature. Instead, you have to click on the name of a color. While that's better than nothing, it takes a few extra seconds to find the color you're looking for. Whereas with color swatch filters, customers' eyes are instantly drawn to the color they want.

Next I'll tell you about two plugins which you can use together to fix both plugins. We'll use WooCommerce Attributes Swatches to add swatches to the product page, and WooCommerce Product Filters for filtering by color swatch.

Setting up color swatches with the WooCommerce Attribute Swatches plugin

To add color swatches to your WooCommerce store, you’ll need the help of a plugin.

WooCommerce Attributes Swatches is a plugin that introduces a range of visually appealing swatches to your store including color and image swatches.

Not only does it allow your customers to view the physical colors of your products, but you can also show a preview of each variation’s actual appearance, so your customer has a clear sense of what they’re getting.

In addition to displaying the information more attractively, you can also include additional costs.

For instance, if you sold an item of jewelry in gold and silver, you can display the price difference as customers hover their mouse over the attribute options. Those additional fees are then automatically added to the cart when purchased.

Here are some key features of the WooCommerce Attributes Swatches plugin:

• Add color swatches, image swatches, and text and radio buttons to your WooCommerce product page.
• Provides customers with a visual way to sort and filter products.
• Display swatches on catalog pages.
• Set up a customized attribute pricing structure quickly.

Using this WooCommerce variation swatches plugin, you can dramatically improve your online shoppers’ user experience and improve your sales by displaying information in a more informative and attractive manner.

How to add color swatches to a WooCommerce product

For this tutorial, you’ll need a WooCommerce website with some products added and the WooCommerce Attributes Swatches plugin installed.

Step #1: Install and activate WooCommerce Attribute Swatches

To get started, purchase WooCommerce Attribute Swatches from the Iconic store: iconicwp.com/woocommerce-attribute-swatches

Then follow these steps:

1. Go to Plugins → Add New → Upload Plugin.
2. Choose the zip file you downloaded, upload, and then click Activate.
3. Once activated, you’ll need to enter your license key.

Now that you have the plugin installed, it’s time to start adding your color swatches.

Step #2: Adding color swatches to your store

Once the plugin is installed, it’s time to start implementing the new and improved color swatches into your WooCommerce store.

Remember, you can also add image swatches, radio, and text buttons if you want to. However, for the purpose of this tutorial, we will focus on color swatches.

We’re also making the assumption that you have already added color attributes to your products. If not, you can follow the steps laid out in this straightforward guide.

To add visual swatches to your WooCommerce Store, take the following steps:

1. Head over to Products → Attributes from the dashboard.
2. Click Edit on the attribute you would like to add a color swatch to.
   
3. Here, you can select your Swatch Type. In this case, you are going to choose the Color Swatch option.
   
4. Upon selecting a Color Swatch, there are two further configuration options, which are as follows:
   1. Swatch Shape
      Select whether you want these swatches to be displayed Round or Square.
   2. Enable Tooltips?
      Select Yes if you’d like the attribute label to be displayed on hover.
      
5. Once you’ve made your selection, there is one final configuration option:
   1. Show Swatch in Catalog?
   2. Select Yes if you’d like available swatches to be displayed in the catalog listing for each product. They will also click through to the product page with those options auto-selected.
      
6. Click Update to finish.

Step #3: Adding your chosen color to the associated product attribute

Since we’ve chosen a color swatch in this tutorial, the last stage of the process involves adding the visual color associated with its attribute term. Fortunately, this is also a simple process.

To add your colors to your product attributes, simply follow these steps:

1. Once again, go to Products → Attributes.
2. In the attribute table, click on the Configure Terms link.
   
3. Enter your attribute term name (e.g. Red) into the Name field.
   
4. Select your Color Swatch using the color picker.
   
5. Click Add New Color, and your new swatch will be added.

That’s it! All you need to do now is repeat the process for each color until you’ve added all of your color swatches.

Once you’ve done that, ensure these fully configured attributes are assigned to the correct products and enjoy the new display on your product and category pages!

Using Attribute Swatches with WooCommerce Product Table

Another cool feature of WooCommerce Attribute Swatches is that you can use it in conjunction with our WooCommerce Product Table plugin.

So not only can you benefit from lightning-fast one-page ordering, but your customers can also view a color swatch within your WooCommerce product tables.

As opposed to using the text-based default dropdown product filter, customers will be able to visually filter their product based on color swatches, delivering an improved customer shopping experience.

To set up swatches for filter widgets in WooCommerce Product Table, simply follow these steps:

1. Go to Products → Attributes.
2. Hover over the attribute you'd like to enable swatches for in the filters and click Edit.
3. Scroll down to Show Swatch in Filters? and change it to Yes.
   
4. Click Update.

That’s all it takes for your product tables to look even more impressive than they did before!

Adding color swatch filters to your store

As we saw earlier, customers also expect to be able to click on attribute swatches in order to filter the products in your shop. Color swatches are the best example of this, like the ones in this store:

You can easily add visual attribute swatch filters with the WooCommerce Product Filters plugin. Just install the plugin and use the setup wizard to create your filters.

Add swatches to improve your online store’s performance today

Variation swatches for WooCommerce (such as color or images) offer customers a more engaging and intuitive shopping experience.

Once installed and configured, the WooCommerce Attribute Swatches plugin allows customers to view the color options visually on each product page. If enabled, you can also offer product filtering based on these more user-friendly attributes.

Don’t forget there are also options to add image swatches and visually appealing radio and text buttons. Comprehensive interoperability with other plugins such as WooCommerce Product Table is also a huge bonus.

So if you’re ready to provide your customers with a shopping experience that’s much more informative and easy on the eye, make sure to download WooCommerce Attributes Swatches today!