Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Drupal 6 Ubercart Theme Add to Cart Form

Parent Feed: 

So you need to theme, customize, or change the Add to cart form that is output by Ubercart? If so, read on for more information. If you are looking to change the general theme or style of the Ubercart product node page, then you might want to look at my post on theming Ubercart Product Page for Drupal 6.

I needed to heavily modify the Ubercart add to cart form for one specific product content type. This example is set up to show how to theme the Ubercart add to cart form for one specific content type (in this example it is the product content type).

Step 1: Create custom Drupal 6 module

I called my custom Drupal 6 module uc_alterations, but you can pick your own name if you are feeling creative.

First step is to create the module folder, in my case I called it uc_alterations. Then it is time to create the info file (called uc_alterations.info). Here are the contents of my info file:


core = "6.x"
dependencies[] = "uc_cart"
description = "Ubercart Add to Cart Form Alterations"
name = "Ubercart Add to Cart Form Alterations"
version = "6.x-1.0"

Step 2: Add Drupal 6 form_alter and theme functions to module

Now its time to create the module file (called uc_alterations.module). In this module file you will need to implement hook_theme, and hook_form_alter.

Here are the contents of my module file:

/**
 * Implements hook_form_alter().
 */
function uc_alterations_form_alter(&$form, &$form_state, $form_id) {
  if(stripos($form_id, 'uc_product_add_to_cart_form') === 0 && $form['#parameters'][2]->type == 'product') {
    $form['#theme']  = 'uc_alterations_add_to_cart';
  }
}
 
/**
 * Implements hook_theme().
 */
function uc_alterations_theme() {
  return array(
    'uc_alterations_add_to_cart' => array(
      'arguments' => array('form' => NULL),
      'template' => 'uc_alterations_form',
    ),
  );
}

Step 3: Add Drupal 6 template file to module

In this instance I decided to use a separate template file. If I would have preferred to use a theme function, I simply would have left out the template line in the hook_theme definition and added a function to the module file similar to the one below:

function theme_uc_alterations_add_to_cart($form) {
  //all my form theming goes here
  return drupal_render($form);
}

Since I decided to use the template approach, I created a file inside my module directory called uc_alterations_form.tpl.php. Here is an example of how that file might look:

<?php
/**
 * Template for theming the add to cart form for product products
 *
 * Available Variables:
 *   $form - contains the form array containing the product attributes
 */
//You can view the form variable by uncommenting this line
//print('<pre>'.print_r($form,1).'</pre>');
?>
<div class="product-wrapper">
  <div class="product-info-wrapper">
    <div><?php print drupal_render($form['attributes'][1]); ?></div>
    <div><?php print drupal_render($form['attributes'][5]); ?></div>
    <div><?php print drupal_render($form['attributes'][2]); ?></div>
  </div>
  <?php print drupal_render($form); ?>
</div>

You will notice that to print out the attributes you need to pull out the specific attribute ID, in this case, 1, 5, and 2. This can cause issues if you have a different development/testing environment if the attribute ID's are not exactly the same, however for some cases, this is an acceptable solution. If you need to make this work with varying attribute ID's, you will need to create some type of lookup function based on the attribute title (or another column in the table that will match up despite differing attribute ID's). Since that is a little out of the scope of this post, and this solution was acceptable in my situation, I will leave that out for now.

You will also note that at the bottom of the Drupal 6 template file, I print out the rest of the form using drupal_render. This will print out the hidden form attributes such as form id, as well as the Add to Cart button.

So there you have it, you can now theme your Drupal 6 Ubercart add to cart form.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web