Adding Variable Products in WooCommerce

In WooCommerce Variable products are made using Attributes, if you’re not sure what attributes are, try Assigning Attributes to Products in WooCommerce before this lesson.

In this lesson we’ll assume that you’ve already set up some global attributes already using the Products > Attributes menu option.

In the left hand admin menu click on Products then Add product. Alternatively hover over Products and click Add product on the flyout menu that appears.

Fill in the product title, description and assign it to the relevant categories. Set your Product Image and add a Product Gallery if needed.

Scroll down to the Product Data box, and from the dropdown select Variable product. You’ll see a new vertical tab appear called Variations

Selecting Variable product

NOTE

The product data box contains different panels accessed by using the vertical navigation on the left hand side. The panels you’ll see depends on the type of product you’re creating and the other woocommerce settings. Additional plugins may also add more panels.

Assigning Global Attributes to your Products

Attributes tab open

In the product data box click on the Attributes tab, using the dropdown Custom product attribute choose from your previously created attributes, select one then click the Add button.

A single attribute added, note that Visible on product page is checked – this information will be shown on the ‘Additional Information’ tab to customers

Your attribute is now displayed, hovering over the name area of the attribute reveals a toggle arrow to open and close the attribute details and a link to remove the attribute.

Attribute Values (terms) added, note that Used for Variations is also checked – as we want customers to choose from these Values. Visible on product page is checked so the Values will also appear on the ‘Additional Information’ tab.

Click in the Value(s) box to select from the terms you previously set up, or click the Select all button to get all terms associated with that attribute. Select none removes the attributes.

If your product needs another term that’s not already set up, then click the Add new button. This will add a new term to the attribute.

Visible on the product page checkbox

Ticking the Visible on the product page checkbox will add the Value(s): to the Additional information tab for customers to view.

Used for variations checkbox

IMPORTANT

Ticking the checkbox Used for variations means customers will be able to choose from the options Value(s) you set for each attribute on the product page – and you can change prices etc. depending on their choices – so tick this box.

Repeat this for other attributes you’re using on your product – go back up to the Custom product attribute choosing your next attribute and clicking the Add button.

A second attribute added, and terms (values) added. Note that both Attributes are toggled open here

You can toggle all Attributes open and closed by using the Expand / Close links above and below your list of attributes.

HINT

Toggle all your Attributes closed, then drag and drop them into your preferred order of display. This will affect the order of the dropdowns your customers see if you’re using the Attribute for Variations.

When you have all your attributes added click the blue Save attributes button.

Creating Variations from Attributes

Next click on the Variations side menu option. There are now a couple of way to add in your variations.

Adding Variations one-by-one

Click on the Go button to add your first variation

Set the dropdown to Add variation and click the Go button. You should see an empty variation appear.

A variation added, notice the two dropdowns

A dropdown will show for each attribute you previously set on the attributes tab (remember ticking Used for variations?). Use this to select terms that apply to this variation.

Notice the top of the form has dropdowns for Default Form Values: these allow you to preset the product page, e.g. If you’re selling T-Shirts you could set the Red, Small T-Shirt as the default view.

Our first variation added, this one applies to any Colour, size Small

Hover over your variation in the list and click the small down arrow toggle (right hand side) to open it up. Here you can now set your individual prices, an image, and all the usual stock information for the variation.

Another variation added that will apply to any Colour and size Medium, notice we’ve toggled the first one (#146) closed.

You can toggle all Variations open and closed by using the Expand / Close links above and below your list of variations.

Repeat this for each variation, then click the blue Save Changes button.

EXAMPLE

You can have variation rules that apply to more than one variation. For example perhaps you have two attributes assigned to your product; size and colour. Size has three terms; small, medium and large. Colour also has three terms; red, yellow and pink. That’s a total of nine possible variations, however the colour choice makes no difference to the prices – so we can create this product using fewer variation rules:

  • Our first rule is set to Any colour, and size small
  • Our second rule is set to Any colour, and size medium
  • Our third rule is set to Any colour, and size large

Adding Variations from all attributes

Using the dropdown Add variation you can select ‘Create variations from all attributes’ and click the Go button. A couple of info popups will appear telling your how many variations are being added. You should now see all the possible variations added.

Using the ‘Create variations from all attributes’ function adds all possible variations

HINT

You can also use the dropdown to set prices and other information to ALL variations in one go – so if all your products share some common data, e.g. length you can set them in one go without having to edit each one manually.

Edit your variations as you need, then click the blue Save Changes button.

Scroll back up and click the blue Publish button to make your variable product live.

HINT

To change the order inside the dropdowns your customers see visit Products > Attributes, edit your attribute and set Default sort order to Custom ordering and Update. Go back to Attributes and repeat for the other attributes. Next click again on Attributes and click on Configure terms (far right) in your first attribute and drag and drop the terms into your preferred display order – repeat for the other attributes.
Published on in Tutorials.
2
0

Sign up to email alerts when I publish new posts.

I will never spam you, send you junk mail, sales emails or pass your email address to third party marketing entities.