How to add color and size in WooCommerce product

There are specific products that we use every day that would be hard to sell without offering simple variations. For example, we are so used to buying clothes by choosing the style, color, and size that we hardly even notice these options exist anymore.

But we certainly notice when one of these variables is missing.

That’s why it’s crucial to understand how to create products on WooCommerce that allow your customers to choose their preferred options. And that’s exactly what we’ll talk about in this article: we’ll explore what product variations are, which products they can be applied to, and why they are important. Finally, we’ll delve into how you can offer this choice on your WooCommerce-built online store.

Let’s start by analyzing what product variations are.

What are product variations and why are they important?

It is quite simple to understand what product variations are: they are the different versions certain items can be offered in, like T-shirts. You could create a different product for each color and size, but it would be extremely unintuitive to navigate, potentially confusing your customers and filling your product catalog with very similar items.

All of this would have a significant impact on your sales.

Here’s where variable products come to the rescue. These are undoubtedly useful for clothing and can be found in T-shirts, pants, dresses, jackets, shoes, underwear, and swimwear. And it is not uncommon to also find them in towels, blankets, pillows, jewelry, watches, phone covers, cosmetics, gadgets, TVs (for all the different resolutions), packages of food (with varying weights), and so much more.

In short: any product that can be sold in different variations (whether they are in terms of color, size, or otherwise) can certainly benefit from a “variable” form. But how does this differ from the classic form?

Difference between simple and variable products

A simple product is the typical item sold on an eCommerce store: you upload an image, enter a title and a description, set the price and stock quantity, and then just list it for sale.

WooCommerce variable products work differently: you need to create a single product but, within it, you create a range of variations that your customers can choose from when buying.

Simply put, the customer selects a generic product and then one or more specific variables (don’t worry, we’ll see how to do it soon with a detailed guide).

For each variation created on the product page, the store will generate a unique code and use it during order generation.

From a customer’s perspective, the process is really simple and intuitive and follows the mechanics already used in all other online stores. From a seller’s point of view, creating a variable product might take more time compared to a simple product, but it won’t take more than a few minutes.

How does the choice of colors and sizes influence customer perception and purchasing decisions?

Instead of having a virtually obligatory choice in certain fields, such as clothing, offering options will get you several benefits within your WooCommerce store.

For instance, when faced with multiple color variations, you can select which color to display by default in the WooCommerce shop catalog based on its style or your promotional strategy.

Furthermore, these variations are often used within the same catalog query, by applying filters based on the various available options.

You can create a more inclusive store that welcomes customers of all types by offering a range of different sizes. Having customers quickly find their own size also helps maintain loyalty, as customers will feel encouraged to explore other products knowing there are suitable options available for them.

There are so many other benefits but it would be redundant to mention them. Instead, let’s quickly see how to create a variable product on your online store with WooCommerce.

Add Sizes and Colors to WooCommerce Products

To create a variable product on your website so your customers can choose variations (such as size and color in this example), all you need to do is start creating a product as usual:

Once you have entered all the necessary information such as name and description, scroll down to the “Product Data” section. In the dropdown menu, you will need to select “Variable Product”:

By clicking on this type of product, a new tab will appear immediately below “Attributes,” titled “Variations”. But before we delve into that, let’s focus on the attributes:

By clicking on “Add New,” you can add an attribute to your product based on those available in your store. Each of these global attributes can be used in variations. To do this, you will need to enter the attribute type on the left and the details on the right:

In the given example, we have created two custom attributes: Size and Color. Then, we have specified the various options, separating each of them with the following symbol: |. For the sizes, we have included the universal terms S, M, and L (small, medium, and large), and for the colors, we have included red, blue, black, and white.

Once the attributes are added, you just need to use them to create variations of your product.

For this, simply click on the next tab, “Variations”. This section will be empty at first, with a button labeled “Generate Variations” at the top:

By clicking on this button, you can automatically generate a variation for each attribute entered earlier. Each variation can be customized like a regular product, modifying the image, price, weight, description, and more:

You can also bulk edit variations thanks to the bulk actions at the top:

Once everything is set up, the product will look like this:

Customers will be able to make their choice with a simple click:

As you can see, the process is fast and intuitive. Of course, there is always room for improvement, both in terms of practices to pay attention to and tools to use to achieve more functions.

What are the best practices for visually presenting color and size variations on your eCommerce site?

Using a tool and exploiting its full potential are two different things. As seen before, it takes very little to create a variable product, but how can you make the most out of it?

Here are some things to keep in mind:

• Associate images with the various options – In the previous example, the different options were presented in textual form in a drop-down list, but most customers prefer to see the option they are choosing. While this may not be necessary for sizes, for colors, you should include either a thumbnail of the item in the corresponding color or a color sample.
• Enter a size chart – While most people already have an idea of the size they are looking for, including a chart in the product images with measurements for each size can really help convince customers. This is especially important considering that different countries use different size standards.
• Use search filters – You cannot expect to exploit variations’ full potential without a fast and intuitive search tool. Give users the ability to filter products directly within the catalog, displaying, for example, all the products with a red or an XL variation.
• Take advantage of scarcity – Including visual elements that display the number of products available in a specific variation can help increase conversion. Adding a label like “Last items in stock” to one of the options may encourage customers to buy sooner.
• Interactive photo gallery – In the finest stores, when a customer selects a color option, it is reflected in the product images.

Last tip: study how the industry-leading eCommerce platforms use this feature and learn from them!

Why choose a WooCommerce plugin for colors and sizes

WooCommerce includes several features right from its initial installation, but if you want advanced options, you need a dedicated plugin.

One of the most obvious examples is the case of variable products and the options available for them: after the suggestions shared above, it becomes clear that the store’s basic functionalities may pose a limitation.

That’s why we recommend a plugin specifically designed to enhance this feature, Color and Label Variations Swatches for WooCommerce, which is available in both a free and a premium version.

YITH Color and Label Variations Swatches for WooCommerce

The way this plugin works is very simple: it allows you to replace the traditional view of the variations in WooCommerce by incorporating images and colors, and enhancing the overall browsing experience.

With WooCommerce basic options, you can change the product image when the preferred color is selected. However, this approach makes all color variations immediately visible to the customer. Let’s see how you can get a different solution with the suggested plugin…

Once you have installed and activated the plugin, in your WordPress dashboard, you will be able to customize the plugin’s behavior:

One of the major advantages of this plugin is its ability to display various options directly on the Shop page, making navigation so much faster and more intuitive:

Once your customers access the product page, they will see the options like this:

We can surely agree this solution looks more appealing than this one:

Best Practices and Advice

We have already shared some tips to achieve the best results selling variable products, but we want to emphasize the potential impact that variations can have on your store.

Let’s start by stating that research suggests that 63% of purchases begin with an online search. It’s not uncommon for us to forget how customers’ minds work, even though we are customers ourselves! Customers are more likely to search for “black T-shirt” or “XXL T-shirt” instead of just “T-shirt” because they already have an idea of the product they want to buy.

And the search can become more and more specific including materials, brands, themes, and more. The more options you offer in your products, the more you can meet all the different searches (in this regard, we recommend mentioning each variation within the product text, such as in the description, to leverage SEO).

Customer reviews, one of the most powerful tools of all time, also have a significant impact on purchasing decisions and are influenced by variations. For instance, if the red T-shirt had 100 reviews while the black one only had one, customers might be inclined towards the first option even if they prefer the second one.

With this aspect in mind, you can also devise promotion strategies for the purchased options at a lower cost.

It also becomes easier to manage stock with variable products: instead of hiding out-of-stock items (giving the impression that they are not available in the store) or leaving them without the option to purchase (hindering and delaying the customer’s navigation), being able to see alternative options to the missing color can often recover a lost sale.

Conclusion

Creating an online store is relatively easy, but optimizing it to avoid losing any sales is much more challenging. Visual changes, such as colors and images, can significantly enhance your store’s conversions.

For this reason, if you sell variable products, we recommend you use an ideal tool to maximize your store’s potential. Keep in mind that most of your potential customers will leave your store within the first minute: every second counts!

Try out the YITH Color and Label Variations Swatches for WooCommerce plugin and give your product pages a makeover!