Customize Drupal commerce checkout flow

Commerce is the new born from ubercart developers For Drupal 7.x

Background information

ubercart had long been the e-commerce solution for Drupal 6.x
but it is some what different from other modules, it existed away from (
So Drupal community is trying to merge back to and some conflicts happens
Some developers decided to start from scratch and build a new e-commerce solution for Drupal 7.x
and hence the born of commerce module

Recent updates fo commerce

Commerce module had been around for more than a year already is it is looking even more impressing ever since.


The "display node" usability problem had been replaced by the concept of "variations"
where you define a product and add "Color variations", "Size variations" etc
they will display as the same product with a dropdown for customers to select

Commerce kickstart

Commerce kickstart is a Drupal "Profile" which bundles lots of extra modules so you can have a store clicks away
Demo products and settings can also be imported so you have real life examples for terminology and setups
You can evaluate the functionality in minutes
and it is a huge step forward for starters to lower the learning curve

Checkout workflow customization

The checkout flow can be customized in "Checkout Settings"
where you can drag and drop different "Panes" to different steps
So if you know how to define "Steps" and "Panes", you can rearrange them right away


The important two functions are: hook_commerce_checkout_page_info() and hook_commerce_checkout_pane_info()
where you define Steps and Panes

 * hook_commerce_checkout_page_info()
function custom_checkout_commerce_checkout_page_info() {
$checkout_pages = array();

$checkout_pages['custom_checkout'] = array(
'title' => t('Custom Step'),
'weight' => 6,


 * hook_commerce_checkout_pane_info()
 * @param  string $value [description]
 * @return [type]        [description]
function custom_checkout_commerce_checkout_pane_info($value='')
$checkout_panes = array();

$checkout_panes['custom_checkout'] = array(
'title' => t('Custom Checkout'),
'page' => 'custom_checkout',
'weight' => 2,
'review' => TRUE,
'callbacks' => array(
'checkout_form' => 'custom_checkout_pane_checkout_form',


Easy easy!