Selling a dress in various sizes and colors, or a computer game for various platforms: The free shop system WooCommerce allows the relatively easy creation of various versions of a product. You will find instructions on how to create variable products in your online shop, and things to look out for in our guide.
Important: The steps below build on our Tutorial to Create Standard Products. You should read it before continuing here, so that you know all the standard product options, because they also apply for variable products.
An example will quickly show, how variable products can be used in your shop. The scenario demonstrated below – from the demo shop of our theme Hamburg – allows a color selection as a variable:
Defining Product Attributes
You will first have to define the attributes of the products you want to work with, i.e. colors, sizes, and any other features of your offered products. In your WordPress dashboard, go to Products → Attributes. Fill out the fields under “Add new Attribute” as follows, if you want to add a selection option, e.g. clothes sizes, to your online shop:
- The Name as it will later be displayed in the shop, e.g. “Size”.
- Slug is a WooCommerce-internal term, which can be accessed as a control element in custom-programmed shops. It is advisable to use the attribute name here as well.
- Type allows you to define at the time of product creation, whether the values for the attribute (“L”, “XL”, etc.) will be maintained via a selection field or as a free text input field. The former may be helpful if another colleague will be taking over the setup of the various products, and you wish to limit their options.
- The Default Sort Order specifies the sequence of selection values the way they will be displayed in the shop.
Click “Add Attribute” to save the new product attribute when you are done. Now you need to assign individual values to the attribute, which the customer can then select in the shop. Click the cogwheel icon next to the attribute you created:
This is where you create the individual entries, in our example these could be “M”, “L”, “XL”, etc.
- Select a Name for the value as it should be displayed in your online shop.
- The Slug is the variation of the name, which will be used in the URL of your shop. Here you can enter the same name again, but in lower case letters and without any special characters (numbers and hyphens are permitted).
- You can order the values hierarchically via the dropdown field Parent, which is similar to the procedure in the product categories. Prerequisite is that at least one value has already been created.
- Whether or not the Description for the individual values will be displayed in the shop depends on the WordPress or WooCommerce theme you have selected.
Once you have created the product attributes you need, you can then start adding the products.
Creating a Variable Product
Go to Products → Add Product to create a new product. Select the entry “Variable Product” from the dropdown list next to Product Data.
Important: Some of the fields you know from the creation of standard products in the tab “General” will be grayed out. These will be defined elsewhere for variable products – more about that a little later.
Switch to the tab Attributes: Select the attribute that will differentiate the variation of your product. You can repeat this step if there are several differentiating attributes – more on that a bit later too. To finish, click “Add”:
Tip: Here you can also create new custom product attributes (see the relevant instructions in WooCommerce). A centralized maintenance of product attributes via Products → Attributes has proven very effective to keep track of everything yourself, or where several colleagues, who should only use predefined values, are tasked with product maintenance.
This is what you do:
- Select the entry or entries under Value(s) that should be available for selection with the product. Alternatively you can click Select All to apply all available values.
- Putting a check mark next to Visible on the Product Page will result in the available values not only appearing in the dropdown list on the product page, but also underneath the product description in an own section entitled “Additional Information”.
- The option Used for Variations must be activated to make the selected attributes available for the product.
- Additional attributes for a product can be created here via the grey button Add next to the dropdown list “Value(s)” as an alternative to the central product maintenance via Products → Attributes.
- The blue button with the same name and the associated dropdown list (preconfigured via “Custom Product Attribute“) allows you to assign additional attributes for products with multiple variables, e.g. if your product can vary in size and color.
Don’t forget to click the button Save Attributes in the end, because only then will the selected options be saved and activated.
Now switch to the tab Variations. This is where the final creation of the product(s) is done. Click “Add Variation”.
Important: The function “Link All Variations” allows you to automatically create variations for every possible combination of attributes. This makes sense if each individual product variation will have its own price or own stock. Remember that this can add up to a very large number of product variations very quickly.
First of all you specify which variation of the product you want to create:
Instead of “Any Color” and “Any Size”, you select specific product attributes, for example “yellow” and “L”. Once you have finished inputting all options for this variation (more on that in a minute), you can then create all other variations via the button “Add Variation” at the end of the input mask.
Tip: Should the variations of your product have one common dimension, e.g. all colors cost the same, have the same availability, etc., then you could in this case leave the entry “Any Color” as is. You will then only have to create variations for the different sizes.
Here you see our example of the variation for “green” and “L”, and the various options that can now be added for each variation separately:
- To make the whole process easier in terms of logistics, you can assign a different item number for each variation (SKU). The procedure is the same as with Standard Products.
- Define the Price, Stock Status, and as needed (optional) a Sale Price, the Weight, and the Dimensions for each variation. More detailed explanations for the various options can be found in our Basic Tutorial for Product Creation in WooCommerce.
- You can only enter the Stock Qty and any Backorders once you have set a check mark for Manage Stock.
Important: Please remember that WooCommerce will control or reduce the stock quantity for individual variations only when a relevant product is sold.
- Instructions regarding the Shipping Class and the Tax Class can be found here and here.
- The check box Enabled allows you to control, whether or not the variant should be offered in your shop right now.
- Downloadable and virtual products can also be managed as variants via the relevant option.
Important: The parent values of the entire variable product apply if the values for item number, weight, size, and stock quantity are not input at the level of the product variation. For shipping class and tax class, you can specify in the relevant field of the product variation, whether you want parent or custom values to apply. You will find all cross-product attributes as usual in the tabs “General”, “Inventory”, and “Shipping”. The price must always be specified at product variation level.
The same applies here as in all other areas of WooCommerce: At first glance, the available options look a lot more complicated than they really are. They do, however, offer a lot of scope for you and for the product range of your WordPress online shop. Once you have created and tested a few variable products, the rest will be child’s play.
Bulk Processing of Variations
Complex variable products can quickly result in countless variations that take a lot of time and effort to maintain. This is where the bulk processing function comes in handy, which you can access via the relevant dropdown list:
Let’s select, for example, “Price Increase by” and then click “Go”. A dropdown list appears. Enter the value “10.00” and confirm with “OK” if you want the price of all previously created variations to increase by 10 Euro. Inputting “10%” would increase all prices by that percentage. Just like with all other creations of or changes to variations: Don’t forget to save the entire product when you are done.
New Plugin: Slack Connector - Connect WordPress, WooCommerce and Slackby Michael Firnkes
Initially we merely wanted to optimize our own Slack-processes. With automated notifications from our MarkettPress shop, the blog and our forums. The resul ...Read more
Role Based Prices for WooCommerce is available again: Different prices for different customer groupsby Michael Firnkes
You want different prices for different customers and users of your online shop? E.g. for subscribers or wholesaler? Or do you need bulk prices? A lot of o ...Read more
WooCommerce Weekly Review #7: Woo vs Magento, shop security and customer confidenceby Michael Firnkes
What is a WooCommerce shop in practice? And how do you protect it against external attacks? This and more in our Weekly Review. WooCommerce vs Magento: ...Read more
WooCommerce Weekly Review #6: Translations, WordCamp Switzerland & avoiding legal warningsby Michael Firnkes
WooCommerce was a hot topic at WordCamp in Switzerland. Progress is being made with the system translations and there are lots of useful new extensions. Th ...Read more