Understanding Product Display in Drupal Commerce

Everything you do with the products with respect to configuring the Product and the Product Type starts with how you want your Product to display on your website. There are basically two things you need to think about the Product Display,
and these are:

1. Set up how the visitor would select product website ( and we will talk more about this shortly).
2. The "Add to Cart" button for your product.

We can set up various kinds of products on the Drupal Commerce website. Let us take physical products as an example to keep the discussions simple in this blog. Within the physical products also, we can set up our product catalog display in various ways. Let us see two simple cases below :

Case 1 : A simple product with ONE selection parameter

Let us say we want to sell Caps on our Drupal Commerce store. Also assume that the caps have the same size and style but only have different colors. Let us assume a BLUE and a BLACK cap. Let us say that the prices of these caps are also different, say $9 and $11 respectively. So basically one product ( the Cap), one variable parameter (the color) and the related variable field (the Price).

Now we have two ways of displaying a cap that is available in  two colors and has a different price tag on it. One way, is show two different products; the Second way is to have one display of the Cap and with some way of selecting the color option to the customer on the website. This second approach is definitely more savvy. This is also how most modern day stores look like on Walmart, LandsEnd of Kohl's etc.

In this case, when you select a BLUE cap, the image of the BLUE cap would show up and it's price. These are the fields of the BLUE Cap product that are tied to the variable field. These are updated with the values ( of the image and price fields) associated with the variable field. We will soon see how this is configured and will park this thought here for a moment.

Case 2 : A simple product with two selection parameters

A good example of this would be to sell a T-Shirts on your website that vary in COLOR and SIZES on your website. So we have two variables or parameters by which the product is defined. There may be any number of fields associate with the product. The underlying logic is that every size and color combination is a separate product. And so it may have it's own price and stock levels.

To elaborate, let us consider that :

1. we have 2 colors (say, red and blue) and 3 sizes (Small , Medium, Large) of t-shirts; and,
2. they all have the same style and just vary from each other by the color and the size. 

So we are basically talking about 6 combinations (S-red, M-red, L-red and S-blue, M-blue, L-blue). And obviously each of these would have their own stock levels and may be vary from each other in price as well. They would also have their image fields for their pictures.

Likewise, we could have more than two parameters as well... as in computer parts where you have a motherboard and then various possibilities of RAMs or Processors or Power Supply units that would go with one another in certain combinations. There is no limit to the number of parameters one can set up.


And just as in Case 1 above, you would have a select list to make your selection and the associated field values will update themselves based on the selection. Only there would be two drop-downs (or select lists) for the two variable / parameters here and these would be, one select list for the SIZES and the other would be for the COLOR.

It is also interesting to note that the two variable fields are dependent on the other. The options visible in the second field are based on the first field. For example,

• if we had only S-blue, M-blue, L-blue and the L-red caps (and no S- or M- red caps). 
• And we placed the Size field before the COLOR field. then the red cap option would only show up if the L- size was selected and not with other size selections. 
• Alternatively, if we had the COLOR field placed before the SIZE field and we selected the RED color, then only the RED color would appear in the COLOR select list.
• As always, the associated fields (image and price) of the referenced product would update themselves automatically.

We could also reverse the dependency of the fields. For example, above the sequence of the fields was SIZE field first and then the second field. This catered to the use case where the customer on the website would select his/ her size and then look for the color options for a the size. This is how it is for a Clothing store or a Shoe store. Alternatively and depending up on your product, say for a JEWELERY STORE, one may want to provide a use case where the customer first selects say a GEMSTONE type, then say the Metal base (Gold or Platinum or Silver) and then checks the sizes and designs that are available. For such situations, all we need to do is to change the order in which the fields are placed. The fields appearing later will be dependent on the field values selected in the above fields.

There are also some key points that need to be noted when thinking of Product Displays (read more about it in the blog,"the Drupal Entities and References") :, these are

1. The Drupal Commerce, by design, is separated into the front end piece (such as the Product Display) and the back-end piece (such as the Product and the Product Type).
2. The Product Display is a Drupal Commerce Entity. This basically means that the Product Display can have it's own fields, can refer to other Product Displays and also can be referred to by other Drupal 7 References such as the Term Reference and the Commerce' Product Reference.  And you will see the Product Reference field that is provided by the Commerce module when we go to create the Product Display.
3. The Product Reference is used by the Product Display to tie it to the various products this Display is referenced by. A Product Reference is also one of the Drupal Commerce-isms and is a feature provided by the Commerce Module. You basically tie the various product options to THIS Product Display through the Product Reference.
4. The Product Display can be referenced by ONE or MORE or even MULTIPLE PRODUCTS at the same time. You will need to set the reference count to UNLIMITED for multiple references.
5. A PRODUCT is also an ENTITY provided by the Commerce Module. We will talk about the Commerce Products in another blog post.
6. There are also some pre-requisites before you can set up a Product Display, these are :
• The Products are required before creating PRODUCT DISPLAYS.
• The Product Types are required for creating Products.

 Now coming back to Creating the Product Display, this is the easy part. The steps are:

1. Navigate to Admin > Content > Add Content (node/add/product-display).
2. Give the Product Display a Title and a Description.
3. Add the Products that refer to this Product Display. 
• Now, by default, there is an AUTOCOMPLETE TEXT FIELD that is provided for typing in the products referred to.
• Separate each product reference by a comma.
4. One can change the autocomplete text field to either a Select List or Check-boxes and Radio Buttons.  For this, navigate to Administration » Structure » Content types » Product display » Manage fields » Product and change the WIDGET from autocomplete text field to the one you wish to have. 
5. Configuration of the Product Display content type is again more of a Drupal 7 thing rather than the Drupal Commerce thing. So one can add / manage fields, manage the display of fields, change the reference widgets and so on. Feel free to try your hand on it.

When you reference multiple products to the Product Display, you will have to take care that of the following 3 things:

• Settings of the Product Display (admin/structure/types/manage/product-display/fields/field_product) : 
• Make sure the "Number of Values" for the product references is set to "UNLIMITED". 
• Settings of the Product Type (admin/commerce/products/types/(your_prodt_type_here)/fields):
• Make sure that the variable fields are MANDATORY.
• Make sure the the "Number of Values" is 1 for the variable field to function as an attribute selection field on Add to Cart forms.

With this we are complete with our understanding of the Product Display part for physical products for our store. In Part 2 we will actually walk through the steps to create two products, one with a singel attribute selection field and the other with the two-attribute selection field. Hope you found this valuable. Do leave your feedback, comments or questions. Thanks.