Overriding Ubercart Checkout page

Ever needed to override the Ubercart checkout page? Here is a quick tutorial on how to do it.

The first option is to use a form_alter() function from within a module, however in this tutorial we are going to discuss two theming options that can be used together if necessary.

The first is to change the actual contents of the checkout page. We need to override the THEME_uc_cart_checkout_form function. This can be pulled from the uc_cart.pages.inc and modified as needed from within the template.php function of your theme (replace THEME with the name of your theme).

function THEME_uc_cart_checkout_form($form) {
  drupal_add_css(drupal_get_path('module', 'uc_cart') . '/uc_cart.css');
 
  $output = '<div id="checkout-instructions">' . check_markup(variable_get('uc_checkout_instructions', ''), variable_get('uc_checkout_instructions_format', FILTER_FORMAT_DEFAULT), FALSE) . '</div>';
 
  foreach (element_children($form['panes']) as $pane_id) {
    if (function_exists(($func = _checkout_pane_data($pane_id, 'callback')))) {
      $result = $func('theme', $form['panes'][$pane_id], NULL);
      if (!empty($result)) {
        $output .= $result;
        $form['panes'][$pane_id] = array();
      }
      else {
        $output .= drupal_render($form['panes'][$pane_id]);
      }
    }
    else {
      $output .= drupal_render($form['panes'][$pane_id]);
    }
  }
 
  $output .= '<div id="checkout-form-bottom">' . drupal_render($form) . '</div>';
 
  return $output;
}

The next option is to actually modify the structure of the checkout page. On many websites (such as Amazon for example), you will see a simplified checkout form with limited navigation. If you are interested in doing something similar in Drupal and Ubercart follow these simple steps.

1. Create a copy of the page.tpl.php file in your theme and rename it page-cart-checkout.tpl.php
2. Clear the cache/theme registry so the new file is recognized by Drupal
3. Modify the file to your hearts content (feel free to strip out blocks, menus, etc as needed since this page template will only be applied on the Ubercart checkout page, the Ubercart review checkout page, and the Ubercart checkout confirmation page (by default).