The 7 best WooCommerce variation swatches plugins (2024)

Displaying your products in a more detailed and attractive manner can seriously bring in those sales!

So naturally, with a large catalog of products in your eCommerce store, it makes sense for you to use product swatches and images. This way, you can display your products and product variations much better on your WooCommerce site, deliver an engaging shopping experience, and help your customers make informed purchase decisions.

In this article, we’ll explore the top seven plugins for variation swatches and photos on WooCommerce, including our own recommended plugin – WooCommerce Variation Swatches.

Why use WooCommerce swatches?

Before we begin going through some of the best plugin options for displaying product swatches and photos, let’s take a step back.

What are swatches in WooCommerce?

Swatches are a way to showcase product details in a more attractive and comprehensive manner on your shop’s product pages. For a better understanding, you can take a look at Pottery Barn’s single product page.

If you hover your mouse over different product variation options, you’ll see detailed images of each option. So if you’re interested in the red blanket, you’ll get a series of variation photos that can help you see how the blanket looks in real life. This helps enhance the shopping experience and makes it easier for customers to find the right product options quickly.

Another great example of product swatches and photos can be seen on Under Armour’s product page.

Customers can select the color and view the product image for the specific color or product option they select. This is a great way to showcase all product variations better and helps customers make informed purchase decisions.

Benefits of using product swatches in WooCommerce

Using product swatches and photos on your online store is a great way to make your online store look unique and help it stand out from the competition. Let’s talk about more of the benefits of using product swatches and images on your WooCommerce site:

• Make your WooCommerce products more attractive. Using product swatches and images to display products and product variations is a great way to encourage more sales. This is because customers will find it much easier to view what each product variation option looks like in real life. While it’s an effective way to boost sales on your WooCommerce site, it can also help make your WooCommerce products look more attractive on shop pages and archive pages.

• Add extra details to your products. Adding extra details to your WooCommerce products is important, especially if you’re selling products that have specific technical details that the customers need to know about before adding the product to their cart. For instance, if you’re selling carpets and rugs, product swatches can be a great way to showcase what each fabric option looks and feels like. Similarly, you can also include product swatches for different carpet sizes and use images to tell customers the actual size measured in inches.

• Make it easier for customers to differentiate between product variations. Using product swatches and photos on your WooCommerce site can also help extra product options or variations stand out on the product page. As a result, it makes it much easier for customers to differentiate between product variations as there are more visual elements associated with each product variation option.

Top 7 WooCommerce plugins for variation swatches and photo

Here, we’ll go over some of the best product variations and photo plugins available for WooCommerce sites.

#1. WooCommerce Variation Swatches

If you want to replace your variation dropdowns with swatches, then the best option is our WooCommerce Variation Swatches plugin.

This plugin allows you to replace the standard WooCommerce variation dropdown fields with your choice of swatch. It works on products with single and multiple attributes.

You can pick from:

• Image swatches

• Radio buttons

• Color swatches
• Text/label swatches (buttons)

You can display different swatch types for different attributes – or you can replace all your variation dropdowns with swatches with a single click.

The plugin has multiple style options so you can define what shape, color and size your swatches should be. You can also choose how to disable variations that are out-of-stock or otherwise unavailable. Choices include fade, hide, disable, or cross through unavailable variations.

Consolidated variations

The plugin also has a unique feature that allows you to combine variations with more than one attribute into single swatches.

This makes it much easier for the user to select the variation they want – it’s a single click compared with multiple clicks.

Easy to configure

Settings can be configured globally, from one place, or per attribute, or per product. This gives you amazing flexibility to display swatches exactly how you want.

Boost your conversion rates

Swatches are a better option for displaying your variations – users can see immediately what the options are and they only need one click to select. It’s a better UX and likely to improve your store’s conversion rate.

Finally, WooCommerce Variation Swatches gives you the option to display swatches on archive pages, as well as on product pages – making it even easier for users to select the variation they want direct from the archive page.

Find out more about the WooCommerce Variation Swatches plugin.

#2. WooCommerce Product Add-Ons Ultimate

The WooCommerce Product Add-Ons Ultimate plugin offers an all-in-one solution for personalizsing the look and feel of your WooCommerce products.

This plugin has everything you need to transform your WooCommerce site into a high-converting, professional storefront. The WooCommerce Product Add-Ons Ultimate comes built-in with a suite of add-ons and advanced features that help you customise, personalise, and improve the shopping experience on your WooCommerce site.

Multiple types of swatches available

Instead of displaying variation dropdown fields as swatches, this plugin lets you add customizable image swatches, colour swatches and text swatches to your WooCommerce products as extra options.

• Image swatches

• Color swatches

• Text swatches

As a store owner, these are some of the things you should be on the lookout for when deciding on the right variation swatches and photos plugin for your WooCommerce site. You also have a lot of flexibility in terms of how you can present your swatches, such as:

• You can allow users to select one or more swatches

• You can set a default option; for e.g., if you offer three t-shirt variations on a product page then you can include swatches for all of them and add a border on the most popular option.
• You can assign a price to each swatch displayed on a product page. Let’s say you sell t-shirts and want to amend the pricing on how intricate the design is or the quality of the material. You can easily do this within the same product page!

See how this works in action by checking out this demo site featuring WooCommerce Product Add-Ons Ultimate set up for radio buttons and image swatches.

All-in-one plugin for WooCommerce swatches and custom fields

WooCommerce Product Add-Ons Ultimate is the most flexible plugin in this list as it offers a lot more than WooCommerce swatches. You can also add custom fields to products, such as checkboxes, custom pricing fields, file upload fields, or calculation fields. This way, customers can personalize your products themselves before adding them to their shopping cart. In addition to this, you can also use conditional logic to show or hide fields based on the value of other fields or depending on which variation the customer has selected.

Instead of using a separate plugin to add product swatches and images to variable product attributes on your WooCommerce site, you can use a single plugin to do everything. The plugin lets you easily create custom fields that display image swatches, which is an easier way to add product details.

Set global or product-specific rules

WooCommerce Product Add-Ons Ultimate lets you set up all the rules you need to create an optimal purchase experience across all product pages.

Some rules will apply to all your products or all products within a category. For example, let’s say you sell custom guitars and offer the same color variations for all your models. In this case, you could set global image swatches that display these color choices. 

As another example, let’s say you sell clothes online and offer t-shirts in XS, S, M, L, and XL. If you wanted to, you could use image swatches to only appear for the t-shirt category, and they would showcase how the different sizes look.

Another great feature of the plugin is that you can apply conditional logic to the swatches. For instance, let’s take the example above and say you offer t-shirt sizes as image swatches because you want to include information about the dimensions directly in the product image.

You can now add the condition that this text field or checkbox should appear only if the customer has selected a specific variation – in this case, a t-shirt in the size Medium. 

For example, you can make this condition reveal a text field asking them whether they want to add up to 30 characters of text to customize the product. If the same customer had chosen an XS t-shirt, you display a text field that’s limited to 20 characters because of the smaller printing area.

Value

You’ll need the Pro package that you can subscribe to for $119/year. Note that this version gives you access to many premium features that other plugins will usually charge for separately, such as different kinds of custom fields, field prices, child product features, conditional logic, and many more.

#3. WooCommerce Variation Swatches & Photos

WooCommerce Variation Swatches & Photos is a simple yet powerful plugin for displaying color and image swatches for WooCommerce variable products.

The WooCommerce swatches plugin lets you add product color swatches or image swatches and display them instead of the usual dropdown boxes for details on your WordPress site. Using color and image swatches provides a much nicer way to display the variations of a product, showcase some of the available styles, or display products in extra colors better.

For instance, you can display a T-shirt product with swatches that showcase each color option that is available. This not only makes it easier for customers to make quick purchase decisions but also encourages them to add more product options to their cart as each option looks more appealing.

As a result, it can help enhance the shopping experience and make your online store look and feel more professional.

Pricing: You can get the WooCommerce Variation Swatches & Photos for $99 per year.

#4. Variation Swatches for WooCommerce

Variation Swatches for WooCommerce is a robust WordPress plugin designed to help you showcase product options better using image and product swatches.

This lets you display professional-looking options using product variation swatches. You can transform your product variation options to custom swatches such as radio button swatches, images, colors, and labels instead of using the generic-looking, default WooCommerce dropdowns.

This solution is better suited for users who are slightly comfortable with figuring out things on their own and work with WooCommerce product attributes extensively. This is because you first have to add product options using the old, tedious process before you can auto-convert them into product swatches and images using the plugin.

In addition to this, you can experiment with different product swatch variations in the quick view popup and display entire attribute swatches in the category, catalog, store, archive pages, and shop pages on your WooCommerce site using the premium version of this plugin.
Pricing: While the Variation Swatches for WooCommerce plugin has a free version, you will need the Pro version, which starts at $49, to unlock the full potential of the plugin.

#5. YITH WooCommerce Color and Label Variations

The YITH WooCommerce Color and Label Variations plugin offers an intuitive and effective way to display all product options on your WooCommerce site in color and photo swatches.

Using the robust plugin, you can replace the default WooCommerce product detail options with custom icons, images, and labels. You can add unlimited product variations and display all of them on a single page. This not only helps offer an enhanced shopping experience but also makes it easier for customers to differentiate between different product options.

Customers will be able to navigate all extra options for products without having to jump around multiple pages. As a result, you encourage more sales and improve product variations’ visibility on your ecommerce store.

Pricing: You can get the YITH WooCommerce Color and Label Variations plugin for $89.99 per year.

#6. ProductX

The ProductX WooCommerce builder plugin comes with various features – allowing you to create full WooCommerce websites in just a few clicks. 

One notable feature is product variation swatches – allowing you to show various swatches of your products based on different attributes. You can enable custom-size labels to show product size swatches in the way you want. You can show custom product size labels based on the attributes you set.

Pricing: The ProductX variation swatches feature comes bundled with the ProductX WooCommerce builder plugin. Pricing for a single-site license with 1-year support starts from $49. For a lifetime license of 1-site, pricing starts from $149.

#7. YaySwatches

YaySwatches lets you add image and color swatches to your WooCommerce products. You can customize the shape, size, border colour, and positioning of your swatches, and you can even include tooltips to add more info about product variations.

Another handy feature of the plugin is that you can use the swatches to mark product variations as sold out.

Pricing: You can get the plugin for a single site at $59 per year.

Pro tips for choosing a WooCommerce swatches plugin

With so many different plugin options available, it can be hard to decide on the right option for your site. This is why it’s important to look out for a few specific features.

• Ease of use. The first thing you want to consider when choosing a plugin is how easy it is to set up. Depending on your level of tech-savviness and the amount of time you have, you need a plugin that’s easy and quick to set up on your WooCommerce site. You also need to consider whether the plugin has good documentation and offers customer support or not. These factors come into play when you’re stuck with a plugin bug, and you need an expert to help you quickly fix your site.
• Comprehensiveness. You also need to consider whether the plugin you choose has all features built-in, especially the ones you need to personalize your online store. Ideally, you want to use a single plugin for the maximum amount of tasks, so it reduces the need for other plugins. You need to consider a plugin that at least offers product personalization options through custom fields, customizable color, variation photos, and other styles of WooCommerce swatches, and also offers additional features such as conditional logic, advanced pricing fields, and file upload or text boxes.
• Better customer experience. Other than the experience on the back end of your WooCommerce site, you need to see how well the plugin enhances the shopping experience for your customers on the front end.

With that in mind, let’s have a final look at the plugins we covered today before concluding with our winner:

	WooCommerce Variation Swatches	WooCommerce Product Add-Ons Ultimate Pro	WooCommerce Variation Swatches & Photos	Variation Swatches for WooCommerce	YITH WooCommerce Color and Label Variations	YaySwatches
Features	The easiest solution for replacing variation dropdowns with you choice of swatches	Has 16 add-on fields to choose from ranging from swatches to lots more; you can set up global rules and conditional logic	Includes standard colour and image swatches to replace the default drop-down	Includes color, button, radio, and image swatches. Also has useful features such as dual color variations and tooltips	Display product variations based on colour, label, and image attributes. You can add a colour picker on each variation	Only includes image and color swatches, but you have quite a few customisation options
Pricing	From $59/year	$119/year	$99/year	$49/year	$89/year	$59/year

How to add WooCommerce swatches to a product page

Method 1: Replacing variation dropdowns with swatches

If you’re looking for the simplest way to add swatches to your WooCommerce shop and product pages, you just need the WooCommerce Variation Swatches plugin.

Global settings

To configure it, go to WooCommerce > Settings > Variation Swatches. Here you can define your global settings – these will be adopted by all attributes and products unless you decide otherwise.

Default style

You can use this setting to apply a new style to all variation dropdowns in your site. Choose from:

• Dropdowns (these are the default variation dropdown fields)
• Color swatches
• Image swatches
• Radio buttons
• Text swatches (buttons)

Default behaviour when disabled

Use this setting to define how any out-of-stock variations are displayed. Choose from:

• Disabled
• Blur
• Cross
• Fade
• Hide

Default shape

Choose the default shape for swatches from the following options:

• Circle
• Rounded
• Square

Attribute label

Use this setting to define how the atrribute labels are displayed. Choose from:

• Block – labels will appear above the swatches
• Inline – labels will appear on the same row as the swatches
• Hidden – labels will be hidden

Display on archives

Enable this setting to display your variation swatches on the shop and archive pages.

AJAX threshold

You can increase this value if your products have more than 30 variations.

Attributes settings

If you’d like to have different settings for certain attributes, just go to Products > Attributes and select the attribute.

Uploading images and setting colors

You can upload images and set colors for specific attribute terms from Products > Attributes. Just click on the attribute you’d like to update then select ‘Configure terms’. You can edit each term individually.

Product settings

Finally, you can update specific swatches at product level. Just go to the product you’d like to update and click on the ‘Attributes’ tab in the ‘Product data’ section.

Method 2: Creating swatches as add-on fields

With WooCommerce Product Add-Ons Ultimate, you can enhance your product pages by creating image and color swatch add-on fields. Here is a detailed step-by-step guide on how to do this. 

1. Install the plugin on your site and navigate to the edit page of the product you want to change. 
2. On the left-side menu, select the Product Add-Ons section and then click on the Add Group button, creating a group of custom add-on fields. 

3. You’ll have to name the group, give it a brief description, and click Add Field. 

4. Then, a new menu will appear with all of the customization settings. 

5. Enter the Field label and select the required Field Swatch. In our example, this can be an Image Swatch, but the options are many. 

6. After that, click Add Option to include as many variations of the product as you want. You can name each one and give it a separate price if you want. 

7. You can also make this a required field. 

8. And you’re done! Just update the product and your customers can now enjoy a more pleasant user experience when visiting your website. 

Get started with a WooCommerce variation swatches plugin today!

Variation swatches for WooCommerce are a great way to showcase extra product options better and make them more appealing to customers. This is because product swatches and images help customers differentiate between different product options easily. As a result, they can make quick, informed purchase decisions and proceed to checkout.

However, you have limited product customization options with default WooCommerce. This is why we recommend using an all-in-one product personalization plugin such as the WooCommerce Product Add-Ons Ultimate. The plugin is the perfect option for creating a fully customizable shopping experience on your WordPress site, even if you’re not very tech-savvy. It offers all the features you need to create a professional, well-designed product store that rakes in more conversions.

Ready to start adding customizable variation swatches and photos with a WooCommerce variation swatches plugin? Get WooCommerce Product Add-Ons Ultimate today!