Documentation

Overview of WooCommerce Attribute Swatches

Learn the basics of WooCommerce Attribute Swatches in this guide. New to Attribute Swatches? Start here!

What is WooCommerce Attribute Swatches?

WooCommerce Attribute Swatches allows you to replace standard variation dropdowns in your WooCommerce store with color, image, and text swatches.

These swatches can appear on the single product page, shop/category pages, and/or product filters. 

With WooCommerce Attribute Swatches, your customers can sort and filter products in a visual way. Which allows them to spend less time trying to find what they want and more time purchasing.

We’ll go over a few of WooCommerce Attribute Swatches’ key features below to get you started. 

Alternatively, you can read all WooCommerce Attribute Swatches guides.

Tour of WooCommerce Attribute Swatches

Create stand-out color and image swatches

With WooCommerce Attribute Swatches you can update the standard WooCommerce variation dropdowns to display clickable image and color swatches.

woocommerce attribute swatches

These swatches will allow customers to see a visual representation of product attributes without having to do a thing. Once all options have been selected, the customer will see an updated product image in the gallery. 

Plus, your text-based attributes can be updated too. You can improve these with radio buttons and a new design to modernize your product pages.

See our guides to set this up:

Tidy up your swatches

If you have a lot of options for customers to choose from, you might find your product pages get easily cluttered when using swatches.

Not to worry! With WooCommerce Attribute Swatches, you can organize, group, and tidy up your swatches in a variety of different ways. 

slide swatches

All so customers can still enjoy the visual benefits of swatches. Without feeling overwhelmed.

See our guides to set this up:

Add fees to your attributes

If you’re looking to include additional fees for one or more of your attributes, you can do so with WooCommerce Attribute Swatches.

For example, if you wanted to charge an additional $5 for an upgraded material, you could do it for individual products, or store-wide attributes.

attribute fees

So this means you can create complicated pricing structures for your products with very little effort.

See our guides to set this up:

Add swatches to your WooCommerce filters

One of the major benefits of WooCommerce Attribute Swatches is it allows you to add your newly created color, image, and text swatches to your product filters.

When customers land on your shop and category pages, they’ll be presented with a much more visual way to find products.

filter attribute swatches

Also – you can add swatches directly under product images on category pages. Then, when a customer clicks on a swatch, the product image updates. 

All of these features together will save customers time and clicks. So they can focus on finding and purchasing the products they’re looking for.

See our full guide to set this up: Enable Swatches In WooCommerce Filter Widgets


WooCommerce Attribute Swatches can do all this and much more. To see what else Attribute Swatches can do, take a look at our other User Guides.

Are you using WooCommerce Attribute Swatches yet?

Start your 14-day free trial right now and get instant access to the features described in this article.

or learn more

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.

WooCommerce Attribute Swatches

WooCommerce Attribute Swatches

Not got the plugin yet? Get instant access right now, free for 14 days.

or learn more

Still need help?

If you haven't found what you're looking for in our documentation, please contact support.

Get Support