WooCommerce Variable Product – How to Set Variables Like Size & Color
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.
Content:
- WooCommerce variable product
- How to add a variable product
- Final thoughts
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 WooCommerce – Global 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.
- Go to Products >> Attribute on your WordPress dashboard
2. Enter the name of the attribute e.g size (the way you want it to appear at the front-end).
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.
After configuring terms, you should have something similar to the screenshot below.
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 data’ menu and select ‘variable product’.
That’s it for this step.
Stage 3: Add Attributes to your variable product
Still in the product data section. Click ‘Attributes’.
Select any of the attributes we previously created (in the ‘Custom product attribute’ dropdown, ). Click ‘Add’.
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.
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.
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.
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.
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.
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.
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.
