Customizable Products with Drupal Commerce Module Guide

As part of our ongoing Drupal Commerce module walkthrough, I'm going to show you how to create custom Products. The Commerce Custom Products module allows the creation of custom line items on Products for customer input. Custom line items for Products are essential when the customer must define something about the Product that they're adding to the cart. A few examples of how you may use Commerce Customizable Products includes:

  • Events or other registrations
  • Donations
  • Inscriptions
  • Personal messages on made-to-order products
  • Pizza orders
  • Personalized gift baskets

Drupal Commerce Module Installation

You will need to have the following modules downloaded and installed:

Required Modules

Dependencies

I have enabled all Drupal Commerce modules, the dependencies, and the Commerce Custom Product module for this walkthrough. 

Customizable Products with Product Types, Products, and Product Displays

This tutorial builds on my previous tutorials. You will need to create a Product Type, add your Products, and a create Product Display. These will become your custom Product with Custom Line Items.

I also strongly recommend you watch the Custom Products YouTube tutorial that goes along with this article. You can follow my previous Drupal Commerce guides below to get you started:  

For this tutorial, I have created a basic Product Type called "Event." I have two Products for event dinners:

  1. Dinner 1: $19.99
  2. Dinner 2: $23.99

I created a Content Type for my Product Display, and I've created a Product Display node.

A Future Commerce Customizable Products

Since my event is a dinner, I should collect dietary information from my customer. To collect this information, I'll need to create a Product with Custom Line Items.

Create Customizable Products

Navigate from Administration Store Configuration → Line Item Types. Select Add a Product Line Item Type.

Name your custom Line Item Type. Select save Line Item Type.

Create Custom Line Item Type

Add and configure your Line Item fields.

Add and Configure Customizable Line Item Type fields

On all fields that require customer input, select Include this field on the Add to Cart form.

Configure Custom Line Item

Finish adding and configuring your other fields. Save and adjust the display settings on your Line Item Type.

Customized Line Item Type Display Settings

Save your Line Item Type Display settings.

Navigate from Administration Structure Content Types. Select Manage Display on the Product Display you will using for your customized Products.

Manage Display Settings on Commerce Product Display for Customized Products

Under the Product Reference field, update your Add to Cart line item type. Change to your new Line Item type for your Customized Product Line Items.

Custom Products: Configure Custom Line Item Add to Cart Line Item Settings

Save your changes. Navigate to your Product Display node to view your customized Product.

Drupal Commerce Customizable Product with Custom Line Items

Next up, I'll show you how to incorporate price changes with custom Products using Drupal Commerce and Rules.

Reach out If you're interested in having us build an e-commerce solution in Drupal for you or your organization. Think this tutorial is useful? Don't forget to share!

 
tracy's picture