Customizable products

Drupal Commerce allows you to sell customizable products that require customer input when added to the cart. Use cases for this functionality include:

The core Line Item module accommodates these scenarios by letting you add any number of fields to the Product line item type and expose them to the Add to Cart form. However, sites that sell multiple types of customizable products or a mixture of customizable and non-customizable products need to define multiple line item types to handle the different configurations of fields. That's where Customizable Products module comes in!

Simple Coupon Code per Line Item

Add a coupon code textfield to the product line item type. Create a Rule that looks for this value and applies a discount based on the code entered.

We're going to add a coupon field to the default Line Item Type.

Store Configuration

To start with, we will navigate to the Store Configuration Screen and click "Line Item Types." In order to add a discount to our line items, we need to add a field.


Add field to Line Item

Line Item Types

Add field to Line Item


We're adding a coupon field here.

Add Field

We're adding a text field in the manage fields screen for our custom line type. If you want to be able to create unique line item types, there is a great contributed module for that called: Commerce Customizable Products.


Any additional field that you want to be configurable before clicking Add to Cart needs to be enabled here.

Field Configuration

This is the screen you will see after click "Continue" when you've "Added" a field. Make sure you configure the "Add to Cart" settings correctly, or you will not be able to edit this field before adding the product to cart.

Any additional field that you want to be configurable before clicking Add to Cart needs to be enabled here.

The idea is that the customer would add a coupon before checkout.


This is what the Coupon Code field should look like on an add to cart form.

Add to Cart Preview

This is what the Coupon Code field should look like on an add to cart form.


Go ahead and add a product to your cart, then click View Cart and then click edit view as shown here.

Edit View

Go ahead and add a product to your cart, then click View Cart and then click edit view as shown here.


Add our coupon field.

Add Field

In order to view our coupon on the shopping cart, we will add the field. Same could be done with the checkout views and/or Shopping Cart block.


Add Components

Configure Field

When configuring the price, make sure to format amount with components. This will help us see the calculation without further code.


Our new cart.

New Cart

This is a screenshot of the new /cart page showing the price with components and empty coupon field.


Adding a new Product Pricing Rule.

Product Price Rule

This is a screenshot of the new /cart page showing the price with components and empty coupon field.


Make up a pricing rule.

Add Price Rule

Make up a pricing rule name on this form. Mostly showing this screen so people don't get too confused with all of this jumping around.


This is where we will be spending the next few minutes. Hang in there, it's pretty easy.

Editing Rule

This is where we will be spending the next few minutes. The plan is to add two conditions, separated by an "And" and finally add an action that applies the discount.


First, add a condition for our new field.

Add Condition

First, add a condition for our new field called "Entity has field." This is a critical step to making that field available in our next condition. Do not skip this step.


For this condition, we need the commerce-line-item data selector and our new field.

Configure Condition

For this condition, we need the commerce-line-item data selector and our new field.


Next, add and to require our final data comparison condition.

Add And Condition

Next, add and to require our final data comparison condition. This is required to force both conditions.


Now lets add data comparison condition.

Add Data Comparison

For our final condition, click "Add condition" and select "Data comparison."


Find our new field.

Configure Condition

Find our new field, called something like "commerce-line-item:field-xxx."


Adding the coupon code here.

Configure Condition

This is part of the magic. I'm setting my coupon code to be an arbitrary four digit number, but you could set it to just about anything that a person could type into their field. You could even potentially be a bit more creative here. This could be a role that a user has or perhaps a previously visited page.


Add discount action.

Add Action

Add discount action. For this action, we chose the "Multiply the unit price by some amount" underneath the "Commerce Line Item." Next screen is configuration settings.


Be sure to set multiply value and change component type to discount.

Configure Action

Be sure to set multiply value and change component type to discount. There is a lot to learn about Price Component Types if you are interested.


Final Shopping Cart using our new coupon rule.

Final Cart

Final Shopping Cart using our new coupon rule.