Configurable products are effectively products that allow you to offer different options within one product type.
For example, if you were selling a chair and it came in different colours, or a desk that comes in different finishes or sizes. In this way you are able to give the customer the choice of which colour / finish he would like all within the same product page.
A configurable product is made up of 2 or more simple products. Most often these simple products are not set to show in the catalog (or search) – their visibility is set to ‘not visible individually’.
You can also have multiple choices set up for customers, for example if you sell chairs in different colours and sizes you could have a set up like:
then choose size:
So how simple products fit into configurable products is each ‘option’ provided in a configurable products is a simple product.
For the above ‘configurable product’ you would need 1 simple product set up for each ‘small, medium and large’ red chair. That is 3 simple products. The same for the the ‘green’, ‘blue’ and ‘yellow’ chair. That adds up to 12 simple products that will become ‘associated products’ within the configurable product.
The ‘link’ that allows simple products to associate into configurable products is a product attribute. Product attributes within have to also be set to ‘used for configurable products’.
So lets get started 🙂
First I’m going to create an attribute called ‘colour’ (I’ve called it colour test as there is already a colour attribute) and I’m going to make sure that the scope is set to ‘global’, the input type is set to ‘dropdown’ and ‘used to create configurable products’ is set to yes.
Then in the label/options tab, I’ve added several colours and also given it a label (what you see in the front-end).
Once I save it (click on ‘save and continue to edit), a new tab appears and it’s called ‘attribute images’. This is where you can set your swatches. For colours it’s quite easy, you can use the ‘colour selector’. If you actually have images, you can upload an image per option – for example in sizes, sometimes people upload an image called ‘S’ , ‘M’ , ‘L’ , ‘XL’ etc.
You can also set a custom swatch size here – if you are using images, sometimes having a slightly larger swatch can help for identification purposes. The default is set to 75px square, and this default setting can also be adjusted.
Please note, that for the swatches / images to show up in the frontend, ensure you have checked off the ‘use images….’ checkbox, as per screenshot below.
Once you have done this, make sure your attribute is assigned to an attribute set that you are going to use. I’m just going to add it to the default one for now.
Now lets set up 3 simple products using the DEFAULT attribute set. Just called the ‘blue, pink and red’ for test purposes.
Make sure, that you:
– Mark the visibility to ‘not visible individually’
– Assign the correct attribute (used to associate the product)
– Upload product image(s) associated with THAT simple product
– Enter the price for THAT simple product
Now that you’ve set up your simple products, it’s time to set up your configurable product:
Click on ‘add product’, choose the ‘default’ (for this example) attribute set and instead of the normal ‘simple product’ create a configurable product.
Now in the next screen you will see which attribute to associate you configurable product with – choose the ‘colour test one’ (ps if you had more than one attribute – say colour AND size, you could choose both – this way you could set up a ‘choose colour’ and then a now ‘choose size’.
Set up configurable product like a normal product but you’ll see an additional tab called ‘associated products’.
Click on the associated products tab:
Debugging Configurable Products:
You’ve done everything right, but it’s just not working!
There are common oversights which seems to turn creating configurable products a nightmare 🙂