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

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 add custom fields in a Drupal Commerce checkout process. The benefit is that it will allow us to collect extra information from customers pertaining to an order. 

How to add custom fields to collect extra information in a Drupal Commerce checkout process? Let's discuss this step by step. This example is based on Drupal 7.

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.

• Install Field Group and Commerce Order Fieldgroup Panes 

Assuming you have installed Drupal, Drupal Commerce and all required modules, let's proceed further. The steps we'll follow here is to add products, display them, add to cart, and see how the additional fields are displayed and how they appear in the order details.

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.

2) Displaying the Drupal Commerce products
Let's create a content type to display the Drupal Commerce products created using 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.

For this example just to test, we need not change anything else. Otherwise, we can configure permission, menu link, display settings etc.

• Click on the "View Page". You should be able to see the products listed in the page.

3) Adding custom fields in the order settings in Drupal Commerce
Here we will add new custom fields to the order settings under Store configurations. By default, the Order settings have the fields, "Line Items", "Order Details" and "Billing Information". Add any custom fields you need here so that additional information can be entered by the user.

• Navigate to Home » Administration » Store » Configuration » Order settings >>Manage Fields
• Add required new fields
• Create a new field group and place the new fields added under the group by dragging right under the group
• Rearrange the fields as desired in "Manage Display"
• Save the configuration

 Example: Here the field group is "Student Details" and under it there are student details such as the student name and class etc.

4) Configure the Checkout settings in Drupal Commerce to display the custom fields added in Order settings
The custom fields added and grouped using the Commerce Order Fieldgroup Panes exposes the field group, which we can add to the Checkout settings.

• Home » Administration » Store » Configuration >> Checkout Settings
• Under Disabled (at the bottom of the page), you should see the field group created in step 3.
• Drag and place it somewhere below the Checkout process
• Save configuration

Now when a user checks out the custom fields will also be displayed and the user can enter the details required.

5) Testing  the new custom fields added in Drupal Commerce Checkout
You can either test the checkout process using the same admin account or using a user account. If using a user account, make sure the permissions are set correctly so that the user can view and execute the checkout process.

• Open a browser tab and open the website. 
• Click on the product display view page from the menu we created earlier in views (step 2). If you forgot to add it to main menu, go to "Home » Administration » Structure » Views >>the product display view" >> click on "View Page".
• The list of products should now be displayed with "Add to Cart" button. Click and add a product to cart.
• Click on the cart to view.
• Click on "Checkout" button
• The custom fields we added should be displayed where we can enter the details asked for.

Screenshot for illustration:

• Fill the details required and continue.
• Review order page also displays the custom fields entered.

Check if the custom fields are displayed in orders after the checkout process is completed.

• As admin, navigate to "Home » Administration » Store » Orders" and click on an order. See the details of the order. The custom fields should also be visible.
• If you tested the checkout process (step 5) from another user login, go to "My Account" > "Orders" > "Click on the order". The custom fields should also be visible.

*End of tutorial*

Hope this Drupal Tip was helpful. Please leave me a comment if you found this post helpful or if you have queries on this post.

Related:
Drupal Commerce: How to disable the quantity text field in Shopping cart?