How To Add A Variable Product To Your Online Shop Print

  • woocommerce, products, ecommerce, attributes, variations
  • 118


A Variable product is a product type that lets you offer a set of variations on a product with control over prices, stock, image, and more for each variation.

An example of a variable product is a clothing item in different colors and sizes.


variation swatches woocommerce




In summary, here is how you can add a variable product,

create new/edit old product → enable variation → add attribute → create variation and save → edit and save (optional)


But wait a minute: What is a WooCommerce attribute?

In order to fully understand what a variable product is, we need to understand what an attribute is.

Attributes are ways of grouping products. You can create an attribute like ‘Size’ then configure terms under the attribute, like ‘Small’, ‘Medium’, ‘Large’.

In the example of a shirt, we might have our product, the Shirt, which is available in the following sizes: Small, Medium, Large. In this case, the attribute is ‘Size’.

Continuing with our shirt example, we have variations according to the Size attribute. We create our product, Shirt, then assign it the Size attribute. Finally, we create variations for the product according to the attribute terms. These are our variations: Small, Medium, Large.

It starts to get more complex if we have more than one attribute assigned to a product. Continuing the shirt example, we could assign two attributes – Size and Colour. If our shirt is available in all sizes and all colors, we could end up with a lot of combinations, e.g.:

  • Small, Red
  • Small, Blue
  • Small, Green
  • Medium, Red
  • Medium, Blue
  • Medium, Green
  • Large, Red
  • Large, Blue
  • Large, Green


All these combinations are separate variations of the product. Yikes.

Sorry if this sounds confusing. Now, let us dig deeper into exactly how we can add this variable product:


Step 1: Create The Product`s Attributes

In your website`s dashboard, go to the left menu bar, and under the Products section, you will see the Attributes option.



Click on the option to see the detailed fields:


The attributes option


As you can see, there are two text fields labeled Name and Slug.

In the Name field, add the title of the attribute such as size or color.

Note that the Slug field is optional and you can leave it out for the moment.

Click the Add Attribute button to add the attribute.

For the purpose of this example, we have added the attribute ‘Size’, as shown in the following screenshot:


Add the product attribute option


Under the heading ‘Terms’, you can see the Configure Items. Click the option to add related options.


ad the diffeent size options


Now, let’s mention the various size options for this item:

As you can see from the example, we have added a few size options from Small to Double Extra Large

By following this process, you can add all the available sizes for your inventory item. Remember to click the button to finalize the changes.

Once done, our list should look like this:


list of different sizes


Now, we will add another attribute of Color, another important variation for our product. here’s how the final results look like;


Step 2: Add The Attributes To The Product

Now that the attributes have been created, it is time to add them to the product.

In the left menu bar, under the Products section, you will find All Products option.

Next, select the item you wish to apply the attributes. For the purpose of this example, we have selected the item Kiddies Muscle Tank.

Hover over the product and click 'Edit' to begin editing it.



Next, go to the Product data dropdown, and select the Variable product option.


select the variable option


Next, select Attributes and you will see the list of all the attributes you have created for your products.

Note that we have selected the Colors attribute for the example below.

Next, add the values (such as black, orange, etc), and check the Used for variations checkbox.


Add the colors


Next, we will add the ‘Size’ attribute and add available variations:


Add different sizes to your product


Once done, click the Save attributes button to finalized the changes.


Step 3: Add the Variations

It’s time for the third and the final step.

Click on the Variations (right below the Attributes option) and click the Go button:


This option is amazing, as I can create variations using all the available attributes.


product variations automatically created from the given values


Once you have set the variations, expand each variation and insert an image, price, weight, dimensions, and other aspects as needed:


add more poduct options if needed

Click the Save changes button to finalize the changes.


click 'save' to preserve your changes


You are almost done. Now scroll up and click the blue publish button to see the results live!


click publish to see your changes


Looks stunning, right? You have now added a WooCommerce variable product to your store.



As you saw, variable products are quite interesting.

By opting to use WooCommerce variable product, you can create a major impact on your online shop.

Add as many variations you want to present all the variations available in your inventory.

Using WooCommerce variable product is so simple that anyone with basic WordPress and WooCommerce skills can do it without any issues!

Was this answer helpful?

« Back