How To Add Color Swatches In WooCommerce

Looking for a solution for how to add color swatches in WooCommerce? Sure, the default variant drop-down selectors work, but they’re not especially user-friendly, are they?

By adding WooCommerce color swatches or images, you’re able to let shoppers click on a visual representation for each product variant, rather than a generic drop-down.

Basically, WooCommerce color swatches help you turn this…


…into this…

woocommerce color swatches

…in just a few minutes.

In this article, I’ll show you how to add color swatches in WooCommerce the easy way. Beyond static colors, you’ll also learn how you can add WooCommerce image swatches to account for non-standard attributes – like a fabric or type of leather.

How To Add Color Swatches In WooCommerce

To add color swatches in WooCommerce, you’ll need the WooCommerce Attribute Swatches plugin. This is a premium plugin, but it offers a 14-day free trial so that you can test it before you need to pay for anything.

With the plugin, you can add both color swatches or image swatches to WooCommerce products. If desired, you can also create text swatches (helpful for product sizes) or radio buttons.

Easily add color swatches or image swatches to WooCommerce products.Click To Tweet

Beyond that, you can configure other nitty-gritty details like:

  • Whether to use square or circular swatches
  • The size of your swatches
  • Whether or not to show swatches on your catalog pages

Here’s how to add color and image swatches for variable product attributes in WooCommerce, step-by-step:

Step 1: Configure Global Product Swatch Settings

Once you’ve installed and activated the plugin, you can configure how your product swatches function on a global level by going to Products → Attributes.

If you create a new attribute or edit an existing one, you’ll see a new Swatch Type drop-down below the regular attribute options. If you select something other than “None” from the drop-down, you’ll further open another set of options that lets you control how your swatches function:

choose type of swatch

Essentially, this lets you configure what type of swatch (if any) should be applied to the different product attributes at your store.

You can always override the settings here on a per-product basis, if needed.

Step 2: Assign Swatches To Individual Attribute Terms

Once you’ve chosen a swatch type, you can assign swatches to individual attribute terms by clicking the Configure terms option in the Attributes area:

configure swatch for individual variant terms

By editing individual terms, you’re able to select the swatch for each:

edit variant term

If you’re using image swatches instead of color swatches, you’ll similarly be able to select which image to use via the normal WordPress Media Library:

choose color swatch

And that’s it! You should now see your product swatches on the front-end of your site. You just learned how to add color swatches in WooCommerce.

Now, let’s take things a couple steps further…

How To Configure WooCommerce Color Swatches On A Per-Product Basis

Above, you configured the default functionality for all products with those attributes. But if you ever want change how swatches function for a specific product, you can use the Swatches tab in the Product data box while editing an individual product:

configure individual product swatch

How To Create WooCommerce Color Swatch Groups

If you have a number of different swatches, WooCommerce color swatch groups can help you provide a more user-friendly product page by grouping together similar attributes. For example, maybe you have one set of matte colors and another set of glossy colors. Groups let you divide them to help your shoppers notice the difference.

WooCommerce color swatch groups can help you provide a more user-friendly product page by grouping together similar attributes.Click To Tweet

To create WooCommerce color swatch groups, edit the attribute for which you want to create your group and add your group labels in the Groups box:

WooCommerce Color Swatch Groups

Then, you can edit the individual terms and assign them to a swatch group:

select group

Once you finish, your product swatches will be divided into different groups on the front-end like so:

Example of WooCommerce Color Swatch Groups

Final Thoughts On How To Add Color Swatches In WooCommerce

When you add color and image swatches for variable product attributes at your WooCommerce store, you make it easier for shoppers to find the exact product that they want.

It only takes few minutes to add this feature to your store, and all new products with those attributes will automatically use the swatches that you’ve configured (unless you choose to manually override this functionality).

With a 14-day free trial, it’s easy to try WooCommerce Attribute Swatches for yourself.

Have any other questions about how to add color swatches in WooCommerce? Leave a comment and we’ll try to help out!

1 Comment

  1. […] example, if you like WooThumbs — you might also enjoy Attribute Swatches. A swatch is a visual representation of your product options — often color — for your […]

Leave a Reply

Your email address will not be published. Required fields are marked *