To be able to add Configurable products, you will need product attributes with Type set to Dropdown and Use To Create Configurable Product set to Yes. In our example, we will use a product attribute called color, which comes by default in Magento and can be found under Catalog | Manage Attributes. The color attribute has a number of possible values that were set by importing the Magento sample data, the values can be seen in the following screenshot. In our example we will use the color values Red, White, and Blue.
Note
If you do not have the Magento sample data installed, you should go to Catalog | Manage Attributes, open the Color attribute and add the colors yourself. Additionally, if you do not have the sample data installed, go to Catalog | Manage Attribute Sets, open the attribute set called Default, drag the color attribute inside it and save the attribute set.
As usual the process of adding a product starts from Catalog | Manage Products. After clicking on the Add Product button, choose Configurable Product and click on Continue. The next step will not be the product edit screen yet, but a screen asking you on what attributes the variants of the Configurable product will be based. These attributes are called the configurable attributes. In our case this is just color. If you have more attributes in your store that are set to be usable in a Configurable product, check the checkboxes that apply and click on Continue. If you were adding a "Zolof The Rock And Roll Destroyer", for example, you would choose the t-shirt size and color here.
This means that in order to work with Configurable products, you first need to know exactly which choices (drop-down lists) you want to display to your customers on the Configurable product's page in your storefront. Only after creating all necessary attributes and their values is it possible to continue with the following steps:
After you have chosen the configurable attributes for your Configurable product, you will arrive in the product edit screen. For this example, we will add a product called "Cube", which will be available in colors red, white, and blue.
Most of the tabs in the left column of the product edit screen are as expected, but just as with the Grouped product, an Associated Products tab is present for the Configurable product. Fill in the product's information as usual and proceed to the Associated Products tab. This will look like the following screenshot, though your product grid at the bottom of the page may be empty; ours is filled with Magento sample data:
Click on the Save and Continue Edit button. Your screen will refresh and you will end up back in the Associated Products tab, which will now look differently because a Quick simple product creation section has been added:
There are two options for associating products to the Configurable product:
- The Simple products you want to associate to the Configurable product don't already exist
- The Simple products you want to associate to the Configurable product already exist
If the Simple products do not already exist, the Quick simple product creation section helps greatly. Using this section you can let Magento create the Simple product variants that should be associated to your Configurable product. The different options are as follows:
- Name: This is the Simple product's name; we suggest that you leave the checkbox selected (meaning Magento will take care of the naming).
- SKU: This is the Simple product's SKU. Often you will want to use your own SKU for the Simple product variants. In that case, uncheck the checkbox and fill in the SKU for the Simple product that you are creating.
- Weight: This is the weight of the Simple product.
- Status: This is the product status for the Simple product that will be created.
- Visibility: This is where the Simple product, which will be created, can be found in your store. We advise setting this to Not visible individually as your Configurable product will already be able to be found.
- Color: In our case, this is the configurable attribute. If you have chosen other attributes as configurable attributes, you will see them here. After choosing a value, you will be able to specify an additional price for the option. For instance, if size XL costs 40 more than size L for your t-shirts, you can input 40 here. You can specify these as a fixed increase of the product price or as a percentage increase of the product price.
- Qty: This is the number of units that are in stock for this Simple product.
- Stock Availability: You can choose whether or not the Simple product that is being created is in stock.
After you have set the options to your liking, click on the Quick Create button. When you have pressed the button, you can see the Quick simple product creation form has remembered all settings except for the configurable attributes' values. Choose the next value (Blue in our case) for your configurable attributes and press Quick Create again.
After doing the same again for the White option, our page looks like the following screenshot. As we are creating a Configurable product with three variants: Red, White, and Blue, we have three associated products. These can be seen in the product grid of the Super product attributes configuration section. In the Zolof t-shirt example previously mentioned, there are three sizes and two colors. In that case, six associated products would need to be created: one for each possible combination.
In the Super product attributes configuration section you can see that it is possible to add additional costs for each variant, if you forgot to do so during the quick creation of Simple products. As we have created all the products we want to associate to the Configurable product through Quick simple product creation, we don't need to use the product grid further. As a final step, do not forget to save your Configurable product now that the Simple products are created.
If the Simple products already exist in your store, logically it is not necessary to create them using the Quick simple products creation tool anymore. Instead, you can associate the Simple products to the Configurable product through the product grid in the Associated Products tab. To follow the steps given, please ensure that you have followed the previous section using the Quick simple product creation tool, and use the same configurable attributes as you did when following the previous section. That way you will have available the Simple products that you previously created.
To demonstrate associating Simple products that already exist to the Configurable product, we will be adding a second Configurable product called "Cube 2". Add the product using the same steps as previously mentioned: go to Catalog | Manage Products, click on Add Product, choose Configurable Product, click on Continue, choose your configurable attributes and click on Continue again:
Fill in the product edit screen as you would normally, go to the Associated Products tab again and click on Save and Continue Edit. As you can see from the screenshots, the product grid can show some products before clicking on Save and Continue Edit, but will display none after saving. This is because the product grid is set to only display associated products after saving. In the header cell of the first column of the product grid, set the drop-down menu, which says Yes, to Any and click on the Search button.
Associating the Simple products to the Configurable product now works as it did for the Grouped product mentioned earlier: check the boxes in front of the rows of the Simple products you want to associate to the Configurable product, and click on the Save button. In our case, we have checked the boxes for the Red Cube, White Cube, and Blue Cube Simple products.
After that, head back to the product edit screen and the Associated Products tab will look the same as in the previous Configurable product, where we used the Quick simple product creation tool!
In your storefront, the Configurable product will now show one or more drop-downs menus that reflect the Simple products that are associated to your Configurable product. When the product is added to the shopping cart, the shopping cart reflects that a product with an option that is added to it by displaying the chosen option below the product's name. After proceeding to check out and completing an order for the Configurable product, you can see that the inventory for the option you have chosen will have decreased. In our case, the stock of the Simple product called Cube will decrease by one after our purchase:
