Product Display: Contextual Field Output in Drupal Commerce

In this Drupal 7 tutorial, I'm going to explain the differences between a Product Display and Products when using the Drupal Commerce module. Then, I'll show you how to build a Product Display for your e-commerce store.

Understanding Product Display concepts in Drupal Commerce

A Product Display can be any Drupal entity with a Product Reference field that is used to display your Products to your customers. Product Displays can be taxonomy vocabularies, views, users, and nodes.

A key to understanding Drupal Commerce is that it separates Products from the Product Display. We’ve already built a Product Type and added Products to that Product Type in the previous Drupal Commerce tutorial. Yet, there’s no public method to see or purchase products yet. That’s where the Product Display comes in. Drupal Commerce separates Products from their Product Displays for a number of reasons, essentially it allows display of Products to be more versatile.

Creating a Product Display Content Type

If you recall from my last Products tutorial, our Drupal e-commerce store is a boutique that sells wines. We priced different vintages of the same wine at different price points and included different images for the vintages. This represents a Product Variation in the Product itself, but it also succinctly represents one of the advantages of breaking out Products from the Product Display. For instance, I may have two vintages of the same type of wine and with different inventory levels, but I don’t want to display these vintages as completely separate Products. I want to have the vintage be an option for my customers on the Product. Therefore, I need a solution that allows a seamless display for my customers to choose their purchase.

Let’s dive into creating a Product Display for our wine.

Navigate to Structure → Content Types → Add Content Type. Name your Content Type and adjust the Content Type settings according to your needs.

You can also customize fields on this Product Display Content Type to fit your Product Display needs.

Add and configure a new field for the Product Reference. When adding the new field, you'll see a new field format option called "Product Reference" as seen below.

Configure the Product Reference field on your Product Display Content Type.

Configure the display settings by selecting Manage Display on your Product Display Content Type.

In the below image, notice the additional fields on the display settings. These fields are shown on the Content Type after the addition of the Product Reference field, and they represent the fields on your Product Type.

You may want to adjust the field order and other display setting options here. For my Product Reference field, I do want to display an Add to Cart form, but I want to adjust the settings of this field. I want my customers to have the ability to enter the quantity of the Products they're selecting to order, so I'll select "Display a textfield quantity widget on the add to cart form," select Update. Save your changes.

You can now begin adding your individual Product Displays by adding nodes to this Product Display Content Type. So, you'll navigate from Content → Add Content and begin adding content to your Product Display. For my Drupal e-commerce store, I've created three Products:

1. 2014 Pinot Noir
2. 2016 Pinot Blanc
3. 2015 Pinot Blanc

Since I want my Pinot Blanc wines to appear in a singular Product Display, I will only need to add two nodes, which will be my Product Displays:

1. Pinot Noir
2. Pinot Blanc

Here's an example of the node creation for the Product Display below.

After saving, I now have Product Displays to display my Products to my customers. Because we selected the vintage field as an Attribute on the Add to Cart form and since we have two Products on the Pinot Blanc Product Display, my customer can toggle the vintage to select their Product. Toggling the vintage will now change both the image and price of the Product they're viewing. As you can see from my Pinot Noir, this select widget is not available on Products with a singular Product Reference.

Stay tuned for more tutorials on how to customize your Drupal Commerce site. If you're interested having us build an e-commerce solution that's aligned with your Drupal web strategy and marketing objectives, reach out. Think this tutorial is useful? Don't forget to share!