1. Set up a new attribute: size
2. Add a new variable product that uses the size attribute
Set up a Size attribute in Commerce
1. The attributes settings are located under the products tab. Click here to open up the attributes menu.
2. Keep in mind that on the attributes menu you will add the ‘name’ of the attribute, not the individual options. Let’s add Size.
Put the name, slug (lowercase version without punctuation – url), whether you’d like to select from a list or type out the attribute on the product editor, and final ordering. Here you have the option to have a custom order or to order alphabetically by name or ID. We left it custom for size below so we can order it Small, Medium, Large, X-Large, instead of alphabetically.
3. Now that you have added size, let’s configure the terms of this attribute. This is where you will add the terms Small, Medium, Large, or X-Large.
Click the ‘Configure Terms’ icon at the far right of the menu.
4. Start adding your sizes. Depending on your theme, the description may or may not show. If not, then you don’t have to fill anything out.
Repeat for the remaining sizes.
After adding all the sizes:
5. You may recall earlier, we set the default sort order to ‘Custom Ordering’. This will allow us to drag and drop to rearrange the order of the sizes. As you can see in picture above, it is just sorted with the most recently added term at the top. Keep in mind that the order of these terms is how they will appear on the product page. Let’s rearrange them by simply dragging the size to the desired position.
6. Now the size attribute will be available to you when adding a variable product. Now we will cover how to add a variable product.
Adding a Variable Product in Commerce
Adding variable products is very similar to adding simple, but with the selection of variable as the product type, additional tabs are added to your product data section.
Enter SKU of your item. Note: you will enter SKUs for variations later on.
Here you can set the stock quantity for the product, or leave it blank to use the stock settings on the variable product’s.
Enter the weights and dimensions of the product, or leave it blank to use the stock settings on the variable product’s.
Same process as simple products. Refer to Linked Products section above.
Here is where the differences between simple and variable products begin. In the following example, we will use an attribute we have already setup: size. Don’t have any attributes? Read How To Setup Attributes in Commerce.
Select size from the drop down menu and click add. Click select all to add all sizes. If you would like to remove any options, click the x next to the term name. Select visible on the product page if you would like customers to choose from these sizes. Then, click used for variations if each size has it’s own sku/price/weight/etc.
Make sure to click save attributes as these will not be visible on the variations tab until you do so.
On the variations tab you will add all of the product data for each individual size.
First, click the ‘add variation’ button 4 times if you will be using all 4 sizes. Select the name of your sizes from the drop down menus. Then, fill in the product data for each size. Note: variation price is required or the variation will not show up on the front-end of your website.
If you fill in all the product information for your variations, you will now be able to see them on the front-end of you website on your product page.