How to Add Product Variations in WooCommerce to Grow Sales

Want to add product variations in WooCommerce to offer color, size, or style options with your products? Product variations are the key to creating a smooth, personalized shopping experience. Whether you sell apparel, electronics, or handmade goods, setting up variations correctly can maximize shoppers’ choice matches and boost sales. 

In this guide, we’ll walk you through how to add product variations in WooCommerce step-by-step—so your customers can find exactly what they’re looking for, faster.

What are Product Variations? 

In a nutshell, product variations are the different options (colors, patterns, or sizes) a single product can have. For example, a t-shirt may be available in white, black, yellow, and red, with sizes like small, medium, large, and extra large. 

You might have seen product variations in the world’s top brands. 

3 Simple Steps to Add Product Variations in WooCommerce 

Follow the three easy steps to add WooCommerce product variations. Moreover, it doesn’t require writing a single line of code. 

Step 1: Add WooCommerce Attributes 

We need attributes to create product variations. If you haven’t added any attributes yet, follow the simple steps below to add some WooCommerce attributes and terms. 

1. First, click Products in your WordPress admin sidebar. 
2. Next, click Attributes.
3. Let’s name it color, as we are going to add some color variations now. However, you can add size, pattern, or any attribute the same way.  
4. Click the Add attribute button and find the Configure terms option as seen below.  

Click on Configure terms to add the color names of your variable products. 

1. Write the color name of a product variation. You can add the slug and description as well.  
2. Click the Add new Color button

This way, you can add as many colors and sizes as you need. For example, I’ve added some colors and sizes, as seen below. 

Step 2: Add the color and size attributes to the variable product

Follow the simple steps to add the color and size attributes to the variable product. 

1. First, click Products.
2. Click All Products. It will show your product list. 
3. Edit the product you want to add variables for. You can also add attributes while adding new products.
4. Scroll down to the Product Data section in the product form and choose the Variable product from the dropdown list. 

1. Select the Attributes tab. 
2. Click the dropdown and select Color and Size one by one.

1. Pick the colors you want to add as variations.
2. Pick sizes the same way.
3. Remember to check Used for variations.
4. Click the Save attributes button. 
5. Click the Update button of your product form in the top right corner.

Similarly, you can add as many color and size attributes as you need. 

Step 3: Create Interactive Product Variations 

Now, follow the steps below to add interactive WooCommerce product variations.

1. First, select the Variations tab.
2. Click Generate variations. It will generate all the possible variations as seen below.

Pro Tips: However, if some of these variations aren’t in your stock, you can simply remove them from the generated list. On the other hand, if you only have a few variations available to offer, or you want to skip different SKU or inventory management for sizes, you can go with the Add manually option. 

1. If all variations share the same price, click Add Price and enter it once. If each variation has a different price, follow the next step. 
2. Click Edit to open the detailed variation form. Enter the price and other necessary information.

1. Click Edit on a variation. 
2. Add product image (product thumbnail).
3. Add an additional image gallery to the variation. However, this feature is not available in WooCommerce core. It’s offered by WooGallery, the ultimate product gallery plugin for WooCommerce stores.  
4. Put the price (if you haven’t done it for all) and other necessary information. 
5. Click Save Changes when done.
6. Finally, click Update at the top right of the product form to apply your changes.

Let’s see how the product page now looks. 

The product variations are working, but they look very basic. Don’t they? 

Let’s learn how to make product variations visually striking and interactive, like we see on the product pages of successful stores and the world’s top brands. 

How to Add Visually Appealing Product Variation Swatches

To transform the basic, invisible dropdown product variations into visually appealing variation swatches, we have to either code or use a plugin. As we want to save many hours and go a no-code way, we prefer using a good plugin. Smart Swatches is one of the best plugins to help you add eye-catching product variation swatches. It lets you add visually striking swatches to all your product variations in 3 clicks- no matter whether the variations are a thousand, lac, or crore. Yes, you have heard right. Install the Smart Swathces and perform the three clicks as seen below to get it done. 

1. As you have installed Smart Swatches, it’s now available in your admin sidebar. First, click on Smart Swatches.
2. Next, click to check the Auto Convert Dropdowns to Image box. It will display every variation’s product image as its swatches. So, make sure you have already added a product image to every variation.  
3. Finally, click the SAVE SETTINGS button.  

All set! Open any product page to see your changes in action. The variation swatches now look more attractive, and you can explore each product variation’s gallery by simply clicking its image swatch. It’s highly interactive, visually stunning, and super impactful to grow sales! 

Here’s an example of a product page with basic image swatches.

How to Display WooCommerce Variation Swatches on Shop Pages 

Your variation image swatches are already visible on your shop and archive pages by default with the Smart Swatches plugin. If you prefer not to display them, turn off the setting.

Use this toggle to show or hide swatches on shop and archive pages easily. 

Why You Should Use Product Variations 

Attention-grabbing product variations benefit your business in many ways. You should use striking product variations to:  

Simplify Organized Product Listings 

Manage all variations (colors, sizes, styles, flavors) under a single product page. One place to update inventory, descriptions, images, and more. No duplication, no confusion, just clean, efficient product management. Save hours of work while keeping your catalog perfectly organized.

Delight Customers with Multiple Options

Give your shoppers the freedom to choose exactly what color and size they want. Products without color or size variations can frustrate shoppers as they don’t find their favorite color and required size. On the other hand, if you offer multiple options, shoppers can easily choose their perfect color, size, flavor (for food), or other preferences. These multiple options are more likely to match customers’ choices and grow sales.

Enhance Shopping Experience 

Let your shoppers explore all their product variation choices without jumping from page to page. Whether it’s a different color, size, or flavor, everything is right on a single product page. This convenience makes their shopping journey faster, smoother, and more enjoyable. Happier customers are far more likely to buy.

Reduce Bounce & Return Rates 

As shoppers find multiple options to choose from and quickly compare them, they can decide confidently. Consequently, they are less likely to leave your product page without making a purchase, and return the purchased product. Thus, visual product variation swatches significantly decrease the bounce and return rate. 

Boost Sales 

Flexible choices and a better shopping experience lead directly to higher conversions. When customers find the exact variation they want quickly, they’re more likely to check out. The more options with visual variation swatches attract customers to explore and help them find the best products to purchase. Ultimately, you enjoy massive sales growth. 

Build Loyalty & Grow Your Brand 

A professional and polished product page with visual variation swatches is an investment in your brand. When customers see that you’ve put care into their shopping experience, it builds trust and confidence. This attention to detail encourages repeat purchases and fosters a loyal community around your brand.

So, no more tomorrow, no more sales loss. 

Let’s add product variation swatches in your WooCommerce store to boost sales now.