Variation Swatches for WooCommerce? Here’s How to Set Them

17Mar 2023 by Moonthemes 7682 Comments

You’ve probably seen variation swatches on ecommerce sites 🛒 before. They’re the visual selectors available when choosing product variants. And you can learn how to use variation swatches for WooCommerce without any coding knowledge. That way, your customer actually sees the textures, colors, and other differences between product variants, helping them decide which one to purchase.

You have three options ⚙️ to add and use variation swatches for WooCommerce:

  1. Use a plugin that adds variation swatches to your current theme
  2. Install a new ecommerce theme with swatches included
  3. Custom code the swatches into your current site

Getting a new theme is unrealistic for many users, considering there’s no reason to swap out a perfectly good theme just for one feature. And custom coding requires special skills (or the hiring of someone who can do that work). That’s why we highly recommend installing a plugin to use variation swatches for WooCommerce.

Why variation swatches?

WooCommerce already comes with a default variation dropdown menu. In addition, many WooCommerce themes include styled variation buttons. So, what’s the point of putting swatches on your product variants?

  1. To improve the shopping experience: A text-based product variant says little about the variant besides its name; adding imagery ensures the customer isn’t clicking on variants they have no interest in, and therefore, they spend less time mindlessly clicking around.
  2. To replace what’s missing with online shopping: Visual swatches give customers a look into the textures, colors, and even shapes of products—things they can often only get by going into a physical retail store.
  3. To boost conversions: With a faster shopping process, and customers feeling more confident with what they’re looking at, you can increase the chances of them buying products.

So, would you rather go with the default product variants from WooCommerce? Like this:

Woocommerce dropdown variants

Or would you rather elevate the look and experience of your variants by incorporating image and color-based swatches? Like this:

viewing the color type of swatches

If you choose the stylish product swatches for WooCommerce, keep reading to learn to add them to your ecommerce website.

How to use variation swatches for WooCommerce

For the easiest way to set up variation swatches for WooCommerce, you can use the Sparks for WooCommerce plugin.

Without requiring any technical knowledge, it lets you add variation swatches to any WooCommerce theme, and it supports swatches using labels, images, or colors.

To follow this tutorial, 📚 we’re assuming you already have WooCommerce installed with products added to your store. From there, we’ll cover how to add variation swatches to your store.

Step 1: Install the Sparks for WooCommerce plugin

To begin, install and activate the Sparks for WooCommerce plugin.

To complete the setup, go to Settings > Sparks on WordPress. Click the Activate button under Variation Swatches.

activating variation swatches for WooCommerce

💡 Note: Sparks for WooCommerce provides other features as well that you can activate on this page. For instance, you might turn on features like product wishlists, product quick views, product comparisons, advanced product reviews, and custom thank you pages, just to name a few.

Step 2: Add an attribute

For Sparks to place visual variant swatches on product pages, you must create attributes and product variants for WooCommerce products.

Here’s an extensive guide on how to configure WooCommerce variations and variable products.

👨‍🏫 It explains that:

  • Attributes are descriptors for products, like material, color, or size
  • Variations are the choices customers make, like how a customer picks between a blue and red shoe

You need to create an attribute for every variation you want to include on your store, since product variants rely on attributes.

To begin, make a global attribute: something like color, texture, or style.

Complete this task by going to Products > Attributes in the WordPress dashboard.

Add a descriptive Name for the attribute—a title that’s representative of the entire group of variants you intend to show. For this guide, we’ll use “Color”.

adding a name to an attribute

Use the Type dropdown field to select the type of variation swatch you’d like to show. This is a feature from the Sparks plugin.

Here are the Types of variation swatches for WooCommerce:

  • Color: you pick colors and they appear as swatches
  • Image: you upload images that serve as variant swatches
  • Label: you type in text labels for the swatches (no visual colors or pictures, just text)

Click Add Attribute to save.

picking a type for variation swatches for WooCommerce

Step 3: Configure terms for the attribute

“Terms” refer to the attribute items you plan to save under the overarching attribute name. Under Color, for instance, you might add terms like Red, Blue, and Green. Find the recently created attribute in the list to the right. Click Configure Terms to proceed.

going to configure the terms

Make an attribute term for each variation you want for the product. First, add a Name.

giving it a name

Scroll down to upload an Image for that variant term. Click the Add New button to save the term.

adding an image to variation swatches for WooCommerce

As you continue adding more terms, they all show up in the list, categorized under one variant.

For example, we have Black, Grey, Pink, Rainbow, and White terms in the Color attribute.

looking at product colors with images as swatches

Step 4: Consider a different variant swatch type (optional)

As mentioned, you can choose a Color, Image, or Label swatch. If you’d rather not upload images to serve as swatches, pick Color or Label when creating an attribute.

deciding on types of variation swatches for WooCommerce

When making the terms for Color types, there’s an option to type in a color hex code or pick from the color selector.

picking a color

You’ll see visual examples of what the color swatches look like as you save terms.

viewing the color variation swatches for WooCommerce

If you opt for the Label swatch type, you’re simply making text buttons for your swatches. As such, you’d add a text Label when creating each attribute term.

adding a label

A preview of all label terms can be seen once done.

viewing all terms for label variation swatches for WooCommerce

Step 5: Make product variants for a WooCommerce item

The attribute is a global item that you can add to multiple products on your store. In order to display swatches on the frontend, you must make product variants for each item.

Go to Products > All Products, and select the item you’d like to edit.

going to a product page

Scroll to the Product Data section. Click the Product Type dropdown and choose Variable Product.

variable product

Open the Attributes tab. Here, use the dropdown menu to select the previously saved attribute. In this case, Color.

choosing an attribute you made before

Click the Add button to attach this attribute to the variable product.

adding the attribute

Add each of the values needed. Make sure to check the Used for variations box to attach these values to the necessary variations. Click the Save Attributes button when you’re done.

using variation swatches for WooCommerce

Next up, open the Variations tab under Product Data.

You’ll see an Add Variation dropdown; leave that as is and select the Go button. This inserts a blank variation. You must insert a blank variation for as many variants as you desire for the product. Then, use the dropdown field for each variant to add from your saves variants, like Black, Grey, Pink, and White.

Alternatively, you can set the dropdown equal to Create variations from all attributes and click the Go button. This will automatically create product variations for all of your chosen attributes, which can save you time if you have a lot of variants.

adding a variation

With all variants added, you must still edit the variants to include pricing and images. One by one, click the Edit links next to every variant. This opens a settings panel for each variant.

clicking the edit button

Click to Upload an Image. Also add a Regular Price, even if all the variants have the same price; WordPress won’t display the variation swatches for WooCommerce if variant’s lack their own pricing.

typing in a price

Walk through all individual variants to add an image (unique to that variant) and a Regular Price.

Click Save Changes at the bottom of the Variations tab.

adding a price and image for variation

Click to Update or Publish the product to save the changes when you’re done.

Step 6: View the variation swatches for WooCommerce in action

Click to View or Preview the frontend of that particular product page. You should now see the variation swatches you created listed as options for the customer to choose. Our example shows a Color headline; after which, you can see the image-based swatches for the variants.

variation swatches for WooCommerce in image form

The product image (and potentially the price and description) changes when a customer selects a product variant swatch. The text version of the variant appears when a user scrolls over a swatch for a short period of time.

results of the image type of swatches

If you selected the Color type when generating your global attributes, the product swatches for WooCommerce display colors instead of images. Everything else is the same in terms of prices and descriptions, and images change when clicked.

viewing the color type of swatches

If you picked the Label type when making attributes, the Sparks plugin shows your swatches as buttons with text. Again, they work just the same as regular swatches.

looking at the label version of variation swatches for WooCommerce

Bonus features with Neve Pro and the Sparks plugin

All the Sparks for WooCommerce functionality that you saw above will work with any WordPress theme.

However, if you want even more advanced functionality, you can pair Sparks for WooCommerce with the Neve theme.

When combining the Sparks for WooCommerce plugin with the Neve Pro theme, you’re able to unlock even more product swatch features, like the ability to show swatches on the Shop page or Archive pages.

This is part of the WooCommerce Booster feature from Neve Pro. You must have the Pro version of Neve in order for these features to appear.

Publishing variation swatches to the Shop gallery (and all Archive pages)

With Neve Pro and the Sparks plugin, here’s how to set this up:

  1. Go to Appearance > Customize > WooCommerce > Product Catalog.
  2. Open the Product Card tab and scroll to the section for the Add To Cart Button.
  3. Pick the After Image option.
  4. Make sure the Enable Variation Swatches switch is turned on.
  5. Click Publish.
enabling variation swatches for WooCommerce in the customization section

As a final measure to ensure the swatches get published to the Shop page (and all archives), navigate to Settings > Sparks in the WordPress dashboard. Scroll down to the Variation Swatches module and click on the link to Configure.

You’re sent to a new page. Under General Settings, activate the option to Show attributes in archive products. This makes swatches visible on all archive items; the Shop page is made up of archives, so it’s an essential step in adding swatches to that gallery.

adding attributes to archive pages

This not only gives the shopper a quick “Add To Cart” button while on the Shop page, but provides visual swatches and variant switching without having to open the full product page. In addition, the product images change on the Shop page to reflect the variant they’d like to buy.

variation swatches for WooCommerce on the shop page

Any questions about variation swatches for WooCommerce? 🤔

Variation swatches turn boring old product variants into a visual experience, bringing online shopping closer to an in-person retail environment.

Customers still can’t try on items or feel the material at your online store, but swatches provide a closer look into textures, colors, and shape variants they otherwise wouldn’t have much information about.

In addition, variation swatches make your product pages more user-friendly and pleasing to the eye. We recommend starting with variation swatches on all product pages, then expanding to Neve Pro features for swatches on Archive and Shop pages.

Do you still have any questions about how to use variation swatches for WooCommerce? Please let us know in the comments section below!

7,682 thoughts on “Variation Swatches for WooCommerce? Here’s How to Set Them”