WooCommerce Variable Product – How to Set Variables Like Size & Color

WooCommerce Variable Product

Every consumer loves to have multiple options to choose from. As an online store owner, you are probably wondering how to create these options for your customers. WooCommerce, a WordPress e-Commerce plugin, makes this possible using the WooCommerce variable product feature.

The plugin has a feature that lets you add variations to your product. For example, you can put 5 colors (or sizes) of a shoe on display for your customers. Using this feature could be a bit tricky at first. Nonetheless, it becomes easy to use with time.

From this article, you’ll get an in-depth understanding of what WooCommerce variable product means. You’ll also learn how to set it up yourself. Let’s get started.


WooCommerce Variable Product

By default, WooCommerce allows you to add seven (7) types of products. They include:

  • Simple products: These are physical products that require shipping. Examples of products in this category are books, shoes, etc.
  • Grouped products: As the name implies, they are a group of simple products. E.g. a set of 10 fancy cups.
  • Virtual products: These kinds of products are not shipped. A typical example is a service.
  • Downloadable: This could be an electronic product like an e-book or a WordPress plugin.
  • Affiliate products: These kinds of products are sold on a different site. You only list them on yours.
  • Variable products: This is a product with variations. Every individual product variation has its own image, price, SKU, etc.

Variable products, being our focus, have dropdowns on them. They allow customers to select options they prefer (maybe the black phone or the white one) through the dropdowns. Typically, they are used for any item that comes in different colors and sizes. Items like shirts, shoes, bags, phones, etc. 

How to add a variable product in WooCommerce

We’ll walk you through a step by step process of adding a variable product in WordPress. Of course, you need to install and set up WooCommerce on your WP site. Read our article on How to Install WooCommerce plugin to learn more. You may also love to read about the fastest WooCommerce themes to use for your store.

So, let’s begin.

Stage 1: Create Global Attributes

You can’t create a variable product without first adding an attribute. This is because attributes define product variations. For instance, a T-shirt’s size could either be small, medium or large. ‘Size’ is the Attribute, while ‘small’, ‘medium’, and ‘large’ are the product variations. I hope you got that.

Now, there are two types of attributes in WooCommerceGlobal Product Attributes and Custom Product Attributes. Global product attributes can be applied to multiple products in your store. For instance, your T-shirt store can have ‘size and color’ as global attributes. Reason being that all your T-shirts will have ‘sizes and colors’ as attributes. So, you don’t have to keep adding the same attributes. That would be quite hectic.

On the other hand, custom product attributes are specific to one product only. When you create this kind of attribute for a product, you can’t apply it to another.

In the next steps, you’ll learn how to create Global Product Attributes.

  1. Go to Products >> Attribute on your WordPress dashboard

How to create Global Product Attributes

2. Enter the name of the attribute e.g size (the way you want it to appear at the front-end).

Creating a Global Product Attribute - WooCommerce variable product

3. Click Add attribute at the end of the page. Your newly created attribute will appear on the right side of your screen.

4. Give values to your attribute by clicking Configure terms. Enter the attribute values e.g. small, large, medium. Keep adding values until you are done.

Creating a Global Product Attribute

After configuring terms, you should have something similar to the screenshot below.

Global Product Attribute - WooCommerce variable product

Yeah! We have successfully created Global Product Attributes. We can apply the attributes to any variation we create afterward. Let’s get down to the next step.

Stage 2: Create A Product & Set the Product Type

As we discussed earlier, WooCommerce has other product types apart from variable products. We need to set the product type to ‘variable products’. To do this, Go to Products >> Add products or ‘edit’ an existing one. Scroll down to the product datamenu and select ‘variable product’.

product data section - WooCommerce variable product

That’s it for this step.

Stage 3: Add Attributes to your variable product

Still in the product data section. Click ‘Attributes’.

Adding attributes to your variable product

Select any of the attributes we previously created (in the ‘Custom product attribute’ dropdown, ). Click ‘Add’.

Adding attributes to your variable product

Fill in the values of the selected attribute (in this case, we have small, medium, and large). Since we already created the values in stage 1, you don’t need to type them. You’ll get suggestions to choose from.

Tick the ‘used for variation’ box.

Adding values to each attribute

Note: If instead of global, you wanted to use custom product attributes, leave the dropdown set to ‘Custom product attribute’ and click Add. Enter the name of the custom attribute you wish to add (let’s say ‘color’). Then add the values (e.g. blue, red, black and white) in the field provided. Also, remember to tick the ‘Used for variations’ box.

Custom product attributes

When you are done with either method, click Save attributes, and you’re done.

Quick Tip: Displaying your variable products as image swatches or color swatches may be more appealing to your customers. You can achieve this with the aid of WooCommerce plugins. An example of such a plugin is the WooCommerce Attribute Swatches plugin. This plugin lets you display your WooCommerce product variations as:

  • Color swatches
  • Image swatches
  • Text and radio buttons.

Stage 4: Manage variations – WooCommerce variable product

For every product variation, there is a unique set of attributes. Does that make any sense to you? Ok, let’s break it down. A T-shirt can be:

  • Small and black (one variation)
  • Large and black (another variation)
  • Medium and black
  • Small and white
  • Large and white etc.

The list could go on and on.

At this stage, we have to set the cost, image, specs of each variation. To do this, click Variations (in the products data section). Select ‘Add variation’ in the dropdown and click Go.

How to add variations

Next step, choose a variation for the variable product from each dropdown (e.g. small and white shirt). Click the arrow to the right to add more details.

How to add variations

Upload the product image by clicking the image icon. Next, fill in the SKU, regular price, sale price, weight, stock status (in stock or out of stock), and dimensions for the product variation.

upload product image

To add another variation, click Go again. Repeat the process until you have entered all variations. When you are done, click Save changes.

At this point, your customers will have a range of product options to choose from using WooCommerce variations. They don’t have to move from one product page to the other seeking the color and size they prefer.
WooCommerce variation

Optimization Tips for Product Variations

When managing an online store, the way you set up and present your product variations can significantly impact both user experience and store performance.

While the basic setup of WooCommerce variations is straightforward, optimizing these variations can lead to better customer engagement. It can also lead to improved conversion rates, and a smoother overall shopping experience.

Here are some practical tips to optimize your product variations.

Use Variation Swatches

Standard dropdown menus for selecting product variations can be cumbersome, especially for stores with a wide range of options. Implementing variation swatches can enhance visual appeal and make the selection process more intuitive.

Swatches allow customers to see color, pattern, or material options at a glance, leading to quicker decision-making and a more enjoyable shopping experience.

Streamline Variation Choices

Having too many options can overwhelm customers, a phenomenon known as “choice overload.” Carefully consider which variations are essential and which can be consolidated.

For example, if you sell t-shirts in several shades of blue, consider whether all are necessary or if a smaller selection could suffice. Simplifying choices can help customers make decisions more efficiently, reducing the chance of them leaving without making a purchase.

Optimize Variation Images

High-quality images are crucial for showcasing product variations. Ensure each variation is represented by a clear, high-resolution image that accurately reflects the product.

Consider using zoom functionality and multiple angles to give customers a better view of the details, helping them feel more confident in their choices.

Leverage Dynamic Pricing

Different variations might warrant different pricing strategies. For instance, limited edition colors or premium materials might be priced higher.

Utilizing dynamic pricing for variations can not only reflect the value of each option but also guide customers towards desired actions, such as choosing overstocked items at a lower price.

Improve Loading Times

Each product variation can add to the load time of your product pages, especially if they’re image-heavy or if there are numerous options. Optimize images and leverage caching solutions to ensure your pages load quickly.

Fast loading times are crucial for maintaining customer interest and reducing bounce rates.

Use Conditional Logic for Variations

In some cases, certain variations only make sense in combination with others. Using conditional logic can help streamline the shopping process by only showing relevant options based on previous selections.

This approach can reduce complexity and make the configuration process more straightforward for customers.

Monitor and Analyze Variation Performance

Keep an eye on how different variations perform using analytics tools. Understanding which variations are popular and which are not can inform inventory decisions and help you tailor your product offerings to match customer preferences.

SEO Implications of Product Variations

Navigating the SEO landscape with WooCommerce product variations can be a complex but rewarding endeavor. Properly managed, product variations not only enhance the user experience but also provide a fertile ground for improving your store’s search engine visibility.

Here are some insights into optimizing your product variations for SEO:

Avoiding Duplicate Content

One of the primary challenges with product variations is the potential for creating duplicate content, which can dilute your SEO efforts. Search engines might struggle to differentiate between main product pages and their variations, leading to confusion about which page to index or rank.

To mitigate this, ensure that each variation has a canonical URL pointing back to the main product page. This signals to search engines that while these pages are related, the main product page should take precedence in search results.

Leveraging Long-Tail Keywords

Product variations are an excellent opportunity to capture long-tail keyword traffic. These are more specific queries that shoppers are likely to use when they are closer to a purchase decision.

For instance, instead of targeting broad terms like “men’s shoes,” you can target long-tail keywords such as “men’s black leather running shoes size 10.” Incorporate these detailed phrases into your product titles, descriptions, and meta tags for each variation to improve visibility for specific searches.

Structured Data for Rich Snippets

Utilize structured data (Schema markup) to provide search engines with detailed information about your products and their variations. This can enable rich snippets in search results, such as price, availability, and ratings, making your listings more attractive and informative to potential customers.

Tools like Google’s Structured Data Markup Helper can guide you in implementing this effectively.

Optimizing Variation Descriptions

While it might be tempting to use a generic description across all variations, customizing the content for each can significantly enhance their SEO value. Tailor the descriptions to reflect the unique attributes of each variation, incorporating relevant keywords naturally.

This not only helps with search engine rankings but also provides a better user experience by offering detailed information about each specific variation.

User-Generated Content

Encourage customers to leave reviews and ratings for specific product variations. User-generated content can add unique, keyword-rich content to your product pages, improving their SEO potential.

Additionally, reviews can help build trust and influence purchase decisions for future customers.

Monitoring Performance

Keep track of how your product variations perform in search engine rankings and user engagement. Tools like Google Analytics and Search Console can provide insights into which variations are attracting traffic, converting well, and ranking for targeted keywords.

Use this data to refine your SEO strategies and focus on high-performing variations.

Advanced Use Cases and Real-World Examples of WooCommerce Variable Products

Exploring advanced use cases and real-world examples can illuminate the versatility and potential of WooCommerce variable products across various business models.

These examples not only serve as inspiration but also offer practical insights into how you can tailor WooCommerce to meet specific business needs.

Let’s delve into a few scenarios where variable products have been creatively and effectively utilized.

Fashion Retail: Customizable Apparel

In the fashion industry, a boutique specializing in customizable apparel offers a compelling example of variable product use. For instance, a store could offer a basic t-shirt design that customers can personalize with different colors, sizes, and even custom text or graphics.

Each variation allows for a unique SKU, pricing, and inventory management, enabling the boutique to cater to diverse customer preferences while maintaining streamlined operations.

Key Takeaway: Use variable products to offer personalized options, enhancing customer engagement and satisfaction.

Tech Gadgets: Smartphones with Multiple Specifications

A tech retailer selling smartphones can leverage variable products to list a single phone model that comes in various storage capacities, colors, and bundled accessories.

This approach simplifies the browsing experience, allowing customers to select their preferred configuration from a single product page, rather than navigating through multiple listings for what is essentially the same phone.

Key Takeaway: Consolidate similar products into a single variable product listing to improve user experience and reduce clutter.

Home Decor: Custom Furniture

A furniture store offering custom-made pieces provides an excellent example of variable products’ depth. Customers could choose a basic furniture design, like a table or a chair, and then select from variations in material (e.g., oak, pine, metal), finishes (e.g., matte, gloss, varnished), and sizes.

This setup not only showcases the store’s range but also empowers customers to find or create exactly what they need.

Key Takeaway: Highlight the range of your offerings by allowing customers to customize products according to their specific needs and preferences.

Specialty Foods: Gourmet Gift Baskets

A gourmet food shop can use variable products to offer customizable gift baskets. Customers might start with a base basket and then select from variations like wine types, cheese assortments, and additional goodies like chocolates or fruits.

This use case demonstrates how variable products can accommodate complex combinations and preferences, making it ideal for gifts or special occasions.

Key Takeaway: Enhance the gifting experience by offering customizable baskets, allowing customers to create personalized gifts for various occasions.

Outdoor Gear: Adventure Equipment Kits

An outdoor gear retailer could create adventure kits as variable products, where customers select based on activity type (e.g., hiking, camping, climbing). Each kit could then offer variations in gear size, color, and additional equipment tailored to the activity level (beginner, intermediate, advanced).

This approach not only caters to a wide range of outdoor enthusiasts but also simplifies the shopping process by bundling related products.

Key Takeaway: Bundle related products into kits that cater to specific activities or interests, simplifying the purchasing decision for customers.

Final Thoughts

In this article, you’ve learned the steps needed to add variable products to your WooCommerce store. The process may seem tedious, especially if you have many product variations, but you would get used to it with time.

We have a couple of other Woocommerce tutorials that you’ll love. They include: How to set up Paypal on WooCommerce and how to fix common WooCommerce errors.

Have you tried adding a WooCommerce variable product before? What challenges did you face? Let us know in the comments section below.

More Resources:

 This post was written by Mesheal Fegor

Mesheal Fegor is a Web/WordPress Developer and technical writer. His WordPress help articles have been featured on Kinsta and other sites. Mesheal holds a master's degree in computer science. His writing focuses on technical WordPress issues, ranging from core WordPress problems, to issues with WooCommerce, and more.

Last edited by: FixRunner Team