Variable Product

Variable Product

Ideal for a specific ‘Brand’ or batch of items of the same design.

Firstly, select variable product in the drop down options next to ‘Product Data’

Variable Product

Again, you will see the sub-sections change to reflect that of the variable product. Some are the same as we have already discussed, so we will concentrate on the differences again.

The sub-sections we are going to concentrate on here, are the ‘Attributes’ and ‘Variations’ as these are the key differences to the other products.

To create a variable product, such as a t-shirt that has many size and colour options, you must have attributes for the ‘Size’ and ‘Colour.’ This allows us to pull the specific sizes and colours in per attribute to create the variations. Seems very confusing just yet, so we will break it down with a discussion and images as we move along.

Attributes.

Yes, we have discussed attributes before on more than one occasion, but now, with a variable product, attributes are used to create the variations for your products. Personally, I like to create them in the Products – Attributes navigation area and then drag them in to any variable products that I create, but you can create them per product, it just takes a little longer. I will however discuss both methods as we move through this attributes discussion.

Method 1 – Using Attributes that have already been created in the main attributes area within the menu structure.

Select the ‘Attributes’ sub-section within product data. You will see a drop down menu and an ‘Add’ button.

Attributes

Notice here that the ‘Brand’ attribute is still there from an earlier topic. If we expand that you will see that there is another check box now showing per attribute called ‘Used for Variations.’ This allows us to pull that attribute (Or not if un-selected) over to the ‘Variations’ sub-section.

Used for Variation not selected

So we will close that and move on.

Now, select the drop down box that says ‘Custom Product Attribute’ and choose the first of your pre-created attributes. Here I will choose ‘Training Colour Attribute’ Yours can be called what ever you wish, like ‘Colour’

Training Colour Attribute

Now select Add. and the attribute will be added and should expand to show you further options.

Training Colour Attribute Expanded

Here, you will notice a few options, the tick boxes for visible on the product page speaks for its self. This must be ticked to use as a variation. Used for variations must be ticked to allow us to transfer them over to the variations sub-section.

The values text entry box is where you add the previously created terms on the main attributes page. Select the text entry box and start typing the first one to add. Also, you can select the text entry box and wait for them all to display. Work through and select each colour that you wish to add for this product. I will add red, white and blue.

Colour terms added

Now repeat the process for the ‘Size’ attribute’ Ours is called training size attribute.

Size Attribute

You can see that we have added the Training Size Attribute and selected the values for small and medium with the values open to now add the large term. both the tick boxes for each attribute added are ticked, visible on product page and used for variations. We will look through Method 2 for adding attributes now, before looking at the variations sub-section.

Method 2 – Custom product attributes on product page.

Choose ‘Custom Product Attribute’ and select Add. The new attribute will be added and expanded as per the others above.

You will see that the option boxes are slightly different now. You can enter the name for the attribute, and the values. The values this time will be added as new, so you must use the ‘|’ (Shift and back-slash – Key left of ‘Z’ on most keyboards.) to separate each one.

Custom Product Attribute

For this example I will create a quick product attribute called ‘Style’ and add values of Men’s, Women’s and Children’s.

Custom Values

Repeat this process until all of your Product Attributes are added. Beware that it is easy to add too many attributes and variations on a product. Sometimes it is a much better shopping experience if you split the product down. In this example an easy and nice shopping experience can come across as a bit too much with the addition of the ‘Style’ attribute for men’s, women’s and Children’s. In the perfect world, we would group all products for let’s say ‘Women’ under their own product category so it would completely negate the need for the customer to make a third selection when shopping. So, we will remove it before proceeding to the variations sub-section by hovering over the attribute and selecting ‘Remove’ from the right side of the attribute bar.

Variations.

This is where the work comes in for your variable products. There are plenty of options to get your product working well, and of course, there are some handy hints too. let’s make out way through this sub-section now.

At first glance, you will see a drop down box with ‘Add Variation’ in it. and an Add button next to it.

Add Variation

Again, there are 2 main methods of adding variations.

Method 1 – Manually adding variations.

select add variation from the drop down box and select add. The new variation will appear with a drop down box per attribute. For ours we have a size and colour drop down box. You can add as many as you wish like this, and work through choosing the relevant options until they are all covered.

Adding a custom variation

I personally don’t like this method as it takes up too much time, but sometimes it is necessary depending on the variations that you wish to create. This way you create them exactly how you wish. Each variation will be selectable on the front end product page by your customers. as an example, we will choose the options for this one as small and blue. So when the customers view the product, if that is the only option availabe, small, blue will be the option for them to buy.

Small Blue

I will now remove this and move on to method 2.

Method 2 – Create variations from all attributes.

This system pulls each and every variation it can from the attributes that you have added in the above sub-section and ticked the box for ‘Used as Variations’ Choose the drop down option for ‘Create variations from all attributes’ and select Go. You will see a windows popup asking if you are sure, and stating that it will create a new variation for each and every possibility. Select Go and then wait for them to be created.

You will now see the variations created and laid out in a nice list with the drop down options for each already selected, covering each of the options available from your attributes.

All Variations Added

That is the 2 methods of adding or creating variations for your product.

Now we will look through the options for the variations. Each variation will have the same options available, some will be slightly different but most of the time I would imagine the options will remain the same per variation. We will work through them now and share some time saving hints.

Variation Options.

Select ‘Edit’ on the right of the variation, or click the variation bar to expand it and view the options.

Variation options

As you can see, most of the options speak for themselves. But we will discuss the options that haven’t been seen before. Remember that these options are for this variation only and will not pass on to all the others. So in out example of a t shirt with choices of size and colour, the only option that would be different per variation is the product image. so at the top left of the image above, you can see a blue image place holder icon. Click that and it will open your media library to upload or select the blue product from your media library. This way, when a customer selects any of the blue items, the product image on the shop page will change to the blue one.

Blue Image

In the image above you can see that we have added a blue image to this variations product image. Below, we will add 2 images, one of the front end product page with the main product image showing as no options have been selected. Then we will choose Large blue and see how the image changes to match the one we chose in the variation options.

Main Product Image – No Options Selected

Large Blue selected – Product Image displaying the Large Blue Product Image.

Now, as we move on through the rest of this discussion, you can see that the options for the variations are very similar to the ones we have already discussed in previous areas of learning. So, we will now talk about some handy time saving hints if the rest of the variation options are the same per variation, for example if each variation had the same price.

If you select the drop down box at the top of the variations window now, you will see a whole lot of new options.

Variation options list

The best way to look at this list is the bulk options list. Here is how you can enter or select specific options for all of the variations at the same time. We will simply set the regular and sale prices. Select the option you wish to amend or add, ours will be ‘Set Regular Price’ and choose Go.

A text box will appear on the screen to enter your regular price. enter it and select the OK button. We will enter 10 to set the regular price of all variations to £10. we will then set the sale price to £5.

Prices Set

Now open any of the variations and check the regular and sale prices have been updated.

Front End options

You can see how it will look on our product page with the options and prices displayed now for the different variations.

That is the simplest way for creating a variable product, have a go and see how you find it and as always, give us a shout if you need any further help.