Drupal Commerce Tips: How to display Drupal Commerce products using views module?

Drupal Commerce is used to build eCommerce websites and applications of all sizes. Drupal Commerce is probably one of the most popular eCommerce module available for the Drupal CMS these days. In this post, we will see how to display Drupal Commerce products.

Drupal Commerce Tips: How to display Drupal Commerce products using views module?

Prerequisites:

• Download Drupal 7 and install it.
• Download Drupal Commerce Module and install it.
• Enable the Drupal Commerce Module from the modules page. You should now have Store in the admin menu bar.
• Ensure that you also install dependent modules required by Drupal Commerce module.

Drupal Commerce currently depends on Drupal 7 (>= 7.15) with the latest releases of a few modules: Ctools 1.3, Views 3.7, Entity API 1.3, Rules 2.6, and Address field 1.0-beta5.

Assuming you have installed Drupal, Drupal Commerce and all required modules, let's proceed further. Let's create some product in Drupal Commerce Store and display them. I normally do this in two ways. Both involves using Views. We'll see in step 2.

1) Add products in Drupal Commerce

Let's create a few products in Drupal Commerce.

• Navigate to Home » Administration » Store » Products » Add a product. This is the default product. If you want you can create another product type from "Home » Administration » Store » Products » Add product type".
• Enter the details required such as Product SKU, Title, price etc.
• Save and add another. Create a few products.

2) Displaying the Drupal Commerce products
I normally display Drupal Commerce products in two ways. 

2.A) First way: if you want each product to have it's own page 

• In this case, after creating the products, we need to create a new "Content Type" for the products. Let's call it "Product Display". 
• Add a new field called "Product" and set field type to "Product Reference".
• In the Product Reference Settings, select the right product type if you have create a new product type in step 1.
• Configure the field display. Save it. This allows each product to have it's own product page. You can have more relevant fields if required.
• Next, create content for the "Product Display" content type. Select one product and create content. Do the same for each products.
• Then create a view. Set content type to show to "Content" and type to "Product Display" content type.
• We now have a view that displays "Product Display" contents.

I really don't prefer this process as it is too much of work. If there are many products, it could be tedious. But if you need each products to have it's own individual page, it could be helpful.

2.B) Second way: Display products by views

Show Commerce Products display page using Views

•     Navigate to Home » Administration » Structure » Views » Add a new view
•     Name the view
•     Set "Show" = "Commerce Product" and "of type" = "product" or your new product type.
•     Check "Create a page". Set the page's properties as desired.
•     Click "Continue and edit"
•     Most of the Product's fields must be in Fields. If there is any field missing that is required, add them by clicking the "Add" button.
• Click on "Menu" under "Page Settings" so that we can access this product display page easily from the main menu. Select  "Normal menu entry"and add menu item to the Main Menu.

Related:

How to add custom fields to collect extra information in a Drupal Commerce checkout ?

How to disable the quantity text field in Shopping cart?