09 Feb

Different size or shape? A guide to WooCommerce product attributes and variations

Many products are “standard” in the sense they are or only one type and are sold as-is. For example, a model car may be of a unique type. Many products, however, can have multiple attributes like size, shape and colour. For example, a t-shirt can be of one style yet be available in blue or red.

To support these types of product variations you could create a separate product in your store for every colour t-shirt you have available. This method is not recommended as you could easily have many hundreds of different products to manage in your store, all with minor variations. A more efficient way to handle different attributes for the same product is with variations.

WooCommerce supports both “simple” and “variable” product types where the latter uses “attributes” to allow customers to buy the desired variation of the product, without changing the product page.

In this blog we’ll take you through how to set product attributes and variations so you can give your customers more purchasing options.

1. Start with attributes

Before you can have a product with customer-chosen variations, you need to set attributes which are then used by the products.

Setting a product attribute

Setting a product attribute

Log into the administration area and select Products → Attributes. There you can create attributes, like colour.

  • Name: Give the attribute a name (e.g. Colours)
  • Slug: A unique reference for the attribute (e.g. colour)
  • Type: This is how the attributes will be selected by the customer. In most cases, leaving this as “Select” is fine as it will allow the attribute to be selected in a drop-down list.
  • Default sort order: You can leave this as “Custom order” which will allow you to drag and drop the “terms” in this attribute.

When you are done setting the properties of the attribute, simply click on the “Add attribute” button. The attribute will be created and listed on the right side of the page.

2. Time for attribute terms

Now let’s add the “terms” that this attribute will use. Terms are things like different colours. To add a new term to the attribute, click on the “Configure terms” button on the far right of the attribute box.

Setting attribute terms

Setting attribute terms

  • Name: The term name (e.g. Blue)
  • Slug: A URL-friendly version of the term (e.g. colourblue)
  • Parent: Does this term have a parent? Add a parent if the term comes under another term.
  • Description: A short description of this term. This description might not show up on the site, depending on the theme.

Once you are satisfied with the term click the “Add new [attribute name]” button and the term will be created.

3. Simple and variable products

When you add a product to your store, WooCommerce defaults it to a “Simple product”. Simple products can have attributes, but they don’t support variations. If you want customers to be able to select a different attribute for their chosen product, you need to add (or update) the product as a “Variable product” in the product data.

Set the type of product in Product Data

Set the type of product in Product Data

4. Set your product attributes

It’s time to link some attributes to the product so we can publish variations in the store.

When you create or edit a product you will see the “Product data” option. Select “Variable product” from the list and a new tab “Variations” will show underneath “Attributes”.

Set the product's attributes

Set the product’s attributes

Click on the “Attributes” tab and add one or more attributes (Size, Colour, etc) that you have created to the product. When you add an attribution you will be given options to add “Values” (the terms) to be part of the attribution. Check “Used for variations” to use the attribute for product variations. To add more than one attribute click the “Add” button and to remove an attribute select “Remove”. When you’re finished, click on “Save attributes.

5. Create a product variation on your terms

Now let’s apply those attribute terms we created earlier to create a variation on a product.

You will see a drop-down list with “Choose a field to bulk edit…”. These are not the attributes you just created. The attributes and terms you created are fed into “Variations”. Select the “Add variation” button to add a variation to this product.

Set a product variation

Set a product variation

You will then see a drop-down list of the different terms available for each attribute linked to the product. If there is only one attribute linked you will only see one drop-down box, if there are two you will see two drop-down lists and so on.

Set the product variations

Set the product variations

Select the term and add in a price for that variation. Note, you must set a price for the variation for it to appear as a purchase option for customers. There are other options here like stock status and physical properties like weight and dimensions. You can also set default options to appear for the product.

Once you have all the variations set, be sure to “Publish” or “Update” the product page for the change to take effect.

Then view the product in the store and you should see a drop-down list of the product attribute and its terms (e.g. Colour – Blue).

store_product_attribute_wpcommerce

Variations can be tricky to get your head around, but they are worth understanding as they can save a lot of product administration time in the long run. And, not to mention, they make your store look that little bit more fancy!

One thought on “Different size or shape? A guide to WooCommerce product attributes and variations

  1. Update: One of our customers has pointed out that if no price for a variation is set, the variable product will not appear in the drop-down list for a customer.

    For variations to work a price for the product variation must be set.

Comments are closed.