Theming the Ubercart Product Page for Drupal 6

By shane
Tue, 2011-07-12 15:39

Share with Others

One thing that I struggled with initially was determining how to best theme the product page for Ubercart. Below is an example of what I use as a starting point when I begin theming an Ubercart product page. I usually take this and then add/remove the variables I need while adding the necessary HTML markup. Much of what I have comes from a post I found on the Ubercart website, but I have modified it to better fit my theme requirements. You can take this code and add it to your theme in a "node-product.tpl.php" file. If you have more than one content type that is a product, you will need to add it for each product type. For example if you have a content type called "shirt" that is an Ubercart product content type, you may also need to create a file called "node-shirt.tpl.php".

// Grabs the firsts image path and sets $imagePath.
$imagePath = $node->field_image_cache['0']['filepath'];
global $base_path;
<div id="node">
<div class="productnode">
  <div class="product-left-col">
    <div class="imagesholder">
      <div class="mainimage">
        <a href="<?php print $base_path . $imagePath; ?>" class="lightbox" rel="lightbox[product]">
          <?php print theme('imagecache', 'product', $imagePath, '', ''); ?>
    <div id="product-other-images">
      <div class="product-other-images-text">
        <a href="<?php print $base_path . $imagePath; ?>" class="lightbox" rel="lightbox[product]"><?php print t("View Image"); ?></a>
      <?php if (isset($node->field_image_cache) && count($node->field_image_cache) > 1) { ?>
      <ul class="other_imgs">
      // get all images except the default one that's already shown
      foreach ($node->field_image_cache as $images) {
        if ($images['filepath'] != $imagePath) {
          <a href="<?php print $base_path . $images['filepath']; ?>" title="<?php print $images['title']; ?>" rel="lightbox"><?php print theme('imagecache', 'uc_thumbnail', $images['filepath'], '', ''); ?></a>
      <?php } ?>
  <div class="product-details">
    <div class="product-title">
      <h2><?php print $node->title; ?></h2>
    <div class="price">
      <?php print uc_currency_format($node->sell_price); ?>
    <div class="productdesc"><?php print $node->content['body']['#value'];  ?></div>
    <div id="cartButtons">
      <?php print $node->content['add_to_cart']["#value"]; ?>
    <div id="product-links">
    <?php print $links; ?>

This code is not by anymeans very clean to work with and as I do more Ubercart product page theming I will probably revise it and clean it up. I have added the below code as an attachment text file for slightly easier viewing. As I mentioned before this will just get you started. You will probably need to add or remove items depending on your needs. You can use the print statement at the top of the code to view all the contents of the $node variable which may prove to be helpful.

After getting the structure of the HTML of your product page completed, you will still need to do a massive amount of CSS work to get it to look just right, but hopefully this will help you get started.

One more thing to note, this is only set up to work with the Drupal Lightbox2 module, if you use thickbox, colorbox, or another image handler, you will probably need to alter the code.

Until next time.

File attachments: 


Wow, thanks for posting this -- a great starting point
trying to figure out how to print image-cache lightboxed images was doing my head in...i am so going to get around to making my own site one day so I can post useful articles like this.


Hi ...

Can you post any video on ... how to view the HTML snippet using LIGHTBOX2 module in simpler way ... reffered loads of posts on drupal .. but still cant get it ..

Please help


Post new comment