WooCommerce – Adding a Variable Product

A variable product has variations such as size or colour. Follow these extra steps to add a new Variable Product to your inventory.

Follow Steps 1-2 from Adding a Simple Product.

3 – Add Product data. This section includes several subsections, as shown below. First, because we are adding a Variable Product, ensure that Variable product is selected next to Product data. To do this, click where it says Simple product, and select Variable product.

3 a – You will notice that for Variable Products there is no General tab. We will set the Prices under the Variations tab instead.

3 b – We can ignore the Inventory tab as we will manage Inventory on a Variation basis – that is, we will enter stock for each Variation or Timber type.

3 c – We can ignore Shipping as these costs have been setup to automatically apply by Location (free for local postcodes) or Cart value, as with Simple Products.

3 d – We can ignore the Linked products tab for now.

3 e – The Attributes tab is where we add the types of Timber in which the product is available. I have already set these up for you – now we just need to add them to the product. First, click on Custom product attribute (highlighted below) and select Timber. Then click Add.

You should now see this:

In the Value(s) field highlighted above, begin typing the name of the Timber(s) in which the product is available. The current Timber options are: Spotted Gum, Silky Oak, Jacaranda, Burl, Rose Gum, Camphor Laurel, Red Gum, Blackbutt, Sydney Blue Gum, Mango, River Oak. Options will appear as you type – select Values (Timbers) as appropriate.

Ensure that the checkbox Used for variations is checked.

Then click the blue Save attributes button.

3 e – Next, we need to add data for the available Variations. First, simply click Add variation (highlighted below) and select Create variations from all products. Then click Go. See image 1 and image 2 below. A box will pop up at the top of the screen – click Okay. Another box will appear at the top of the screen – click Okay again.

Image 1
Image 2

Depending on the Timbers you’ve added under Attributes, you will now see similar to what’s shown below.

You will see a note that says something like: 3 variations do not have prices. Variations (and their attributes) that do not have prices will not be shown in your store. So we now need to add Prices.

WooCommerce provides the ability to add different prices for each Variation. However, for now we will add the same price for every Variation. To do that, click Add variation again (highlighted below), and this time select Prices > Set regular prices. Then click Go.

You will now see a screen that looks like this:

Add the Price in the Enter a value field (highlighted above) in dollars and cents (and without the $ sign) and click OK.

Next, we need to enter Stock for each variation. To do that, first click in area highlighted below next to the Variation name, eg Red Gum.

Your screen will now look like this:

Check the Manage stock? box (highlighted above) to enable Stock options. Enter Stock quantity in the Stock quantity field highlighted above. Then click anywhere in the white space next to the Variation name (eg Red Gum, highlighted above) to close the options.

Repeat this process for each Variation.

Then click the blue Save changes button highlighted below.

3 f – We can ignore the Advanced tab.

3 g – We can ignore the Get more options tab.

You can now follow the same steps as used for adding a Simple Product, as described below.

4 – Add your Product description at the bottom of the product editing screen, in the field labelled Product short description. This is a simple text editing field.

The remaining steps all occur using the settings on the right hand side of the Product edit screen (note: ignore the Astra Settings panel).

5 – Select Categories for the product. Simply check which Category, or Categories the Product should appear under. Any given product can appear under multiple Categories as appropriate.

6 – Select Tags for the product. In this instance we are using Tags to denote the type of timber the Product uses. To add a Tag, click in the box and start typing the timber the name – an auto-suggest will appear. Click on the Tag / Timber name as it appears, then click Add to assign it to the Product. You can also click on Choose from most used tags.

7 – Add your Product image. Click Set product image (image 1 below). This will open the Media Library (image 2 below). If the product image has already been added to the Media Library, you can select it directly. Alternatively, click the Upload files link highlighted below and follow the prompts to add a new image. Note: ignore the Product gallery panel, we are not using this for now.

8 – Publish or Save draft.

If you are midway through adding a Product and need to come back to it before Publishing, you can save your work as a draft (highlighted below). The draft product will then be accessible by navigating to Products > All products and will be denoted in the list of products with a Draft label.

When you’re ready to Publish, click the blue Publish button (highlighted below). Note: once published, the button will change to an Update button – of course you can come back to the product and make any changes after Publishing – simply make your changes and click Update.

You can also use the Preview button to view your work as it will appear on the website frontend.

Related posts