Setting up variable and grouped products

To create a variable product, perform the following steps:

• Start by creating a new product. Add a long and short description, select the correct category or create one, and assign a couple of tags. Set a featured image that will appear in your product category page.
• Next, in the Product Data area, select the Variable product as the product type:

• Note that some fields have disappeared; it’s no longer possible to add the product price here. The SKU field is still available, but normally, you would leave it empty and set individual SKUs at a lower level. We’ll see that in a minute. On the Inventory tab, Enable the Manage Stock? field, but do not set the Stock Qty field. Later on, we’ll add the stock levels for individual products. Skip the other tabs for now and head over to the Attributes tab:

• Click on the drop-down that says Custom product attribute, select Color, and click on the Add button.
• Next, check the fields, Visible on the product page and Use for variations. This will make sure that our visitors will be able to see this attribute, and we’ll be able to create multiple instances (variations) of our product using different colors.
• On the right, click on the Value(s) field and select the colors that you want to use for this product. To keep things a little bit simple for our example, we just select Blue and Grey:

• We repeat the same steps for our Shoe Size attribute, but now we push the Select All button to immediately select all the available shoe sizes. The final result will look as follows:

• Click on the Save Attributes button on the bottom left of the Attributes tab. Or alternatively, save the draft of your product in the top-right corner of the product screen. Next, head over to the Variations tab. If you forget to save your attributes before moving on to the Variations tab, the following error message will appear:

• Return to the Variations tab and note that now some fields have become visible. Click on the drop down and select Create variations from all attributes to assign all the possible combinations of colors and sizes at once. It’s also possible to add them one by one in case you do not have all the possible combinations of the attribute values available. Click on Go:

• WooCommerce will give you a warning message because this may create a large number of combinations (two colors having five different sizes makes a total of 10 variations). Click on Ok. Another message appears mentioning the number of created variations. Click on Ok again.
• A large area with all the variations will now be displayed. Click on one of the rows to expand all the underlying fields of that variation. Note that it’s now possible to set a number of fields for every variation individually. The price may differ, the available Stock Qty may differ, and you can set an individual SKU for every variation. It’s also possible to assign a different image per variation. Start filling in your variations individually. If a field is set to the value Same as a parent, then the variable holds the same value as the parent item.

• You may also use the handy Bulk Edit function on top to change fields for all the variations. That function is a bit hidden in the current WooCommerce version, but you may find it by clicking the drop-down at the top that currently still says Create variations from all attributes. For example, when creating our demo shoe product, generally all the sizes will have the same sales price. We could enter them one by one for every variation, but it’s much faster to do them all at once using the function, Set regular prices:

We normally work this way to set everything we need, but your situation may differ depending on your products of course:

• Set the field Regular Price for all the products at once using the Bulk Edit function.
• Click on the little image area to set a separate product image per variation. In our demo product, we need this to be able to show a different image depending on the color that the user chooses. So, if the user selects the shoes in blue, we want that automatically the product image changes to the blue variation. You reach this by assigning an image to every single variation.
• Set the SKU, Image, and Stock Qty individually for every variation, assuming that the stock quantities are not all the same.
• The following image below shows the Bulk edit option to change the regular sales price for all the variations at once:

• The result should look something like this:

• The last step that we have to take now is to publish the product in the top-right corner of the screen.
• Now that we published our product, of course, we want to see the end result in the frontend:

Note that the image that is shown automatically updates if the visitor selects a different color. If that doesn’t happen, in your situation it’s a problem of the WordPress theme and not an issue in WooCommerce.

Are you thinking about changing the way this product page looks like? 

You probably noticed that the Add to cart button does not become available if no variation has been chosen yet.

To overcome this problem, you can set a default form value for your product in the backend so that it will be displayed immediately:

Product and Variation

When working with a product with lots of variations, there’s something important that you need to know about the product page your visitors see. Because of performance reasons, WooCommerce does not load the availability of all the variations if you have over 20 variations in a single product.

In such a case, the attributes of the variation will be loaded using Ajax once a variation is selected by the user. This might mean that the user sees a certain color or size, but that it actually isn’t available anymore. WooCommerce will show a message to the user in that case. Below 20 variations this issue doesn’t exist.

Also in the WordPress administration, this limitation of 20 variations becomes visible. Pagination has been added on the top and bottom of the list with variations. This has been done to make sure that the number of items that must be loaded at once is manageable.

Loading lots of variations was a former issue within WooCommerce, where products became very slow in the WordPress backend. This has been solved as of WooCommerce version 2.4.

Building E-Commerce Solutions with WooCommerce

This book has been written for everyone who wants to learn how to expand an existing WordPress website with e-commerce functions using the WooCommerce plugin.

Download Free eBook