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.

Fig 1.0

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.

Fig 1.1

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

Fig 1.2

Further Resources

If you have any questions, please leave a comment.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of WebWash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 12 years and has successfully completed several large Drupal projects in Australia.

6 thoughts on “Display Checkout Progress in Drupal Commerce”

    1. You can change the indicator in two ways.

      First, use CSS to style the list items. This will be the easiest. Or, if you want more control over the markup, override the theme_commerce_checkout_progress_list theme function.

Leave a Comment

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Media Management in Drupal

Download a FREE 8 part video course on managing media in Drupal.