Display Checkout Progress in Drupal Commerce

Most e-commerce websites offer a checkout process indicator, the indicator often appears at the top of a checkout page and lets a user know which checkout process they are currently on. For example, an indicator should display each major checkout process such as checkout, review and complete. In this day and age, everyone wants to know how much effort is required to complete something and an indicator helps users gauge the effort required. Adding an indicator to a website that uses Drupal Commerce is very easy thanks to the Commerce Checkout Progress module.

In this tutorial, I’ll show you how to setup the Commerce Checkout Progress module on your Drupal Commerce website.

Getting Started

Go download and install the Commerce Checkout Progress module.

This module only works with Drupal Commerce, and in this tutorial I’ll assume that you already have a basic website setup using Commerce.

Setup Checkout Progress Indicator

The indicator has been implemented as a Drupal block. When you enable the module, the block is automatically added to the content region.

You can leave the block in the content region because it only appears on the cart and checkout/* pages. You can also hide the indicator on specific checkout pages.

1. Go to Structure -> Blocks (admin/structure/block) and click on the configure link with the “Checkout progress indication” row.

2. Click on the Pages vertical tab and you’ll see a checkbox list of checkout pages. If none of the pages are selected, then all the pages will display the indicator.

To see the indicator in action, add a product to your cart and go to the checkout page.

Further Resources

• Commerce Module Tuesday: Commerce checkout progress

If you have any questions, please leave a comment.