As you have seen, Drupal Commerce provides a lot of flexibility when it comes to products. By adding additional fields to your installation's product's display, you can customize your store to support a custom "t-shirt" product type with size and color attributes. In this recipe, you will be learning about creating a t-shirt product type for your Drupal Commerce store.
Before you begin, it's a good idea to have a list of the attributes that you want to have for the custom t-shirt product type. This example will add the following fields:
Size: From a selection of small, medium, and large
Color: From a selection of blue, red, yellow, and purple
Log in to your Drupal Commerce administration panel, navigate to Products | Variation types, and follow these steps to create a custom product type for t-shirts in your store:
Click on the Add product variation type button:
Give the new product type a title by entering a suitable value in the Name field:
Leave the Default product variations of this type to be saved as new revisions when edited checkbox checked, if you want Drupal Commerce to save a new revision of the variation each time you edit it.
Check the Create matching product display type checkbox if you want to create a Drupal Commerce product display type to display the products created using this product variation type.
Click on the Save and add fields button:
You will now see the Product variation type saved message, and a list of fields associated with your new t-shirt product type:
Using the Add new field block, you can begin to customize this product type.
Populate the Label field with T-shirt size, and then select List (text) from the Type of data to store field, leaving the Form element to edit the data field as Select list:
Now click on Save, and you'll be presented with the Allowed values list field on the Field settings tab; enter one value per line, using a vertical pipe (
|) to separate a value from a label. For example, enter the following:Medium-sized t-shirt | Medium
Entering the preceding value will present the customer with the option of Medium on the frontend of your store, while internally in the Drupal Commerce administration panel it will appear as Medium-sized t-shirt. The label is optional, so you can just enter one value per line if you prefer. The settings in the example are as follows:
Small
Medium
Large
The preceding values means that you will see the relevant label (that is, Small, Medium, or Large) displayed both in the Drupal Commerce administration panel and as a customer on the frontend of your store. This system means you can provide your customers, with slightly different information to help them make an informed choice about the product they're buying.
Click on the Save field settings button to save your changes.
Leave the Default value set as None to prevent customers from ordering the wrong sized t-shirt:
Check the Attribute field settings checkbox so it is enabled, which allows the dropdown to be shown on the "add to cart" features of Drupal Commerce, so customers can pick their t-shirt size:
Leave the Number of values field set to 1 in the T-shirt size field settings block (you only want customers to pick a t-shirt of one size), and click on the Save settings button again:
You'll be returned to the Manage fields tab, where you can repeat steps 3 to 13 to add a color attribute for your t-shirts.
Once you've done that, you should be able to see the new T-shirt colour field listed in the Manage fields tab:
Your new product type is now ready, and you can add products of this type. Navigate to Products | Add a product.
Next, select the T-shirts link that will appear in alphabetical order at the bottom of the list:
Populate the form that appears next, entering a SKU, Title, and Price for the product and selecting the T-shirt size and T-shirt colour values:
Ensure that the Status field is set to Active so that you (and the customers on your store) are able to view the products.
Click on the Save variation button, and add more products for each size/color combination that your store are available in your store for selling.
Now navigate to Store settings | Variation types, and select the manage fields option for the Tshirts content type that you created in the previous steps:
Drupal Commerce allows you to add your own custom fields to product types so that you can assign your own attributes to different types of products within your store. So, using the preceding method, your store could sell t-shirts using a t-shirts product type that allows customers to select the size and color of their t-shirt. It could also sell teapots using a teapot product type, and allow customers to pick the capacity of the teapot they are buying instead.
The new t-shirt product type that you just created will display the products to your customers in a similar way:
Note the drop-down list that allows customers to pick their preferred size of t-shirt. If you change this to Small, the values that are different in the small t-shirt product variation will change too:
In particular, you can see that the product image has changed, and the price is updated.