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
If you have any questions, please leave a comment.
Clear, to the point, helpful screenies. Thanks for sharing. : )
Thanks.
How to add numbers, like above, or arrows?
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_listtheme function.We did a video review on Commerce Module Tuesday a while ago 🙂 https://vimeo.com/38383913
Thanks, added the link to the tutorial.