How to add color swatches to a WooCommerce product

In a standard WooCommerce setup, product attributes such as color are displayed as plain text or variation dropdowns. 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 2 ways to add color swatches to your WooCommerce store. Which method you choose depends on whether you want to use product variations or other types of product option:

• The excellent WooCommerce Attribute Swatches plugin by Iconic replaces the variation dropdowns with color swatches on your product pages. Use this if you want to keep using variations for the color attributes. 
• If you find variations a pain to manage, then you might prefer to add your product options - including color - with the WooCommerce Product Options plugin instead. This provides an easier way to add options to your products, and comes with a range of styles including color swatches, clickable images, and so on.

At the end, 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 the best WooCommerce color swatch plugins to fix both problems.

Option 1 - 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!

Option 2 - Add color swatches as product options (no variations needed!)

Lots of people hate variations because they're so time-consuming to set up. That's largely because you have to create a separate variation for every possible combination of attributes. This quickly adds up to huge numbers of variations to manage.

A quicker alternative is to set up your product options using the WooCommerce Product Options plugin instead. This takes a different approach because you add each option individually and never need to combine them into variations.

For example, imagine that you have a clothing product and want to add 10 color and 5 size options. To do this using variations, you'd need to create 50 variations. Whereas to do it using WooCommerce Product Options, you'd just need to add 15 options - i.e. 10 colors and 5 sizes. The plugin does the hard work and lets customers mix and match them as needed.

WooCommerce Product Options comes with a color swatch option which you can use to display color options for your products. In addition, it comes with lots of other styles for displaying your product options more effectively:

Bonus: Display color swatches on the WooCommerce shop page

Whichever WooCommerce color swatches plugin you choose, it's worth considering which pages in your store customers would like to select colors on. Normally, the color swatches will only appear on individual product pages. That's not terribly convenient for customers because they have to visit multiple pages to choose colors and add to the cart.

You can improve on this by installing one of these plugins, which will also display the color swatches on the WooCommerce shop page:

• WooCommerce Product Table - Transform your shop page layout into a quick one-page order form, complete with the color swatches added by the Attribute Swatches or Product Options plugin and multi-select add to cart buttons:
  

  

• WooCommerce Express Shop Page - Keep your usual shop page layout, but enable one-page shopping by displaying color swatches from WooCommerce Product Options on the main shop page:
  

  

Adding color swatch filters to your store

As we saw earlier, customers also expect to be able to click on color 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 color 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. There are lots of great plugins to help you do this.

Best plugins for adding color swatches to your product pages:

• WooCommerce Attribute Swatches to replace the variation dropdowns with color swatches. 
• WooCommerce Product Options to add color swatches as options instead of having to mess around with variations.

Once you've started displaying WooCommerce color swatches on the product page, you can take them to the next level by also dispaying them on the shop page. To do this, install either the Product Table or Express Shop Page plugins.

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 your chosen plugins today!