How do I theme checkout pages?

Question

how do I theme the cart and checkout pages in Drupal commerce? I have set content, account, billing, and payment parts. Is there any --.tpl.php file to create?

Answer 1

For theming cart page add page--cart.tpl.php in your theme's templates directory.

For theming checkout page add page--checkout.tpl.php in your theme's templates directory. If you want to theme only the checkout review page add page--checkout--review.tpl.php in templates directory.

After adding tpl files do not forget to clear cache.

If you want to know about more hooks do a dpm($variables) inside YOURTHEMENAME_preprocess_page function and look into the theme_hook_suggestions array.

For details read this comment http://drupal.org/node/1142800#comment-5365466

Answer 2

The only template files in Commerce related to the checkout module are commerce-checkout-errors-message.tpl.php and commerce-checkout-help.tpl.php. These are located in the Commerce module directory under modules/checkout/theme.

The only template file related to the Cart module is commerce-cart-block.tpl.php, which is located in the Commerce module directory under modules/cart/theme.

Answer 3

Actually the easiest way I think is using hook_form_FORM_ID_alter() to alter the checkout form. If all you need is only change the part inside the checkout form.

As I see, most of the checkout & checkout review page content is inside the form. First is 'commerce_checkout_form_checkout', and second is 'commerce_checkout_form_review'. If you know how to use form API & how to alter the form by using hook_form_FORM_ID_alter(). That will be very easy to alter the form content. Like reorder them or insert/remove elements.

Here is a simple example for add a notice into the checkout page:

function my_module_form_commerce_checkout_form_alter(&$form, &$form_state, $form_id) {

  //If you have Devel module, uncomment to see what is the original form data
  //kpr($form);

  //uncomment to see current form_id
  //echo $form_id;

  //check form id
  if($form_id == 'commerce_checkout_form'){
    $form['my_test_notice'] = array(
      '#markup' => '<h1>Hello, this is a checkout test!</h1>',
      '#weight' => -1,
    );
  }
  elseif($form_id == 'commerce_checkout_form_review'){
    $form['my_test_notice'] = array(
      '#markup' => '<h1>Hello, this is a checkout review test!</h1>',
      '#weight' => -1,
    );
  }
  //You can add more ...

}

Answer 4

You can also use the body classes (depending on what base theme you use, these are often available). This allows you to give specific values to child items of the body with class .checkout, for example. This might be enough to jig the layout a little bit.

Answer 5

Have you tried Theme Develper module which gives you info about which theme hooks to implements and which themplate files to adopt.

Answer 6

Cart page is just a view, so style it as any other view:

1. Go to page when you are logged in as admin, find and click "Edit view" link.

2. On view edit page open "Advanced" view settings and click "Theming information"

3. There you can see how you should name your templates (i.e. views-view--commerce-cart-summary--default.tpl.php) and also if you at template name at beginning of the row (i.e. first is "Display output" you can see default template, copy it, save with other name in your theme's template dir and modify it as you like).

4. Or, you can build those pages (views) on your own. http://www.drupalcommerce.org/user-guide/modifying-shopping-cart-using-views

Answer 7

You can make your own .tpl files, and call them with a hook_theme function:

function yourtheme_theme(&$existing, $type, $theme, $path) {
  return array(
    'commerce_cart_add_to_cart_form'=> array(
    'render element' => 'form',
    'template' => 'path/to/template/commerce_cart_add_to_cart_form',
  ),
    'commerce_checkout_form_review'=> array(
    'render element' => 'form',
    'template' => 'path/to/template/commerce_checkout_form_review',
  ),
  ...
  ...(more templates)
}

as these are forms, you then can hide the form, find what you need, and use your own markup in your template.

<?php
  hide($form);
  dpm($form);
?>

<div>
  print render($form[...]);
</div>

Or, you can leave it as it is and do stuff around it.