Ubercart: Customizing the Default Product Grid

I am relatively new to Ubercart and Drupal.  I am setting up a online store for a client, and there was a need to add a "Short Description" to the product grid that is in the catalog.

This is relatively straight-forward to do as I am just adding the single field.  If you have further customizations, I recommend that you explore using Drupal Views. 

I am using the Market Share 6 theme for Drupal/Ubercart 2.0.  I made a copy of it and called it fp_marketshare_6.

Please make sure that you have selected to display the products in a grid in Ubercart (admin/store/settings/catalog/edit/grid).

Here are the steps that I followed. 

Step 1.  Create the filed for the Product Content Type

In Drupal to the Content Type page (admin/content/types).  There you will see a listing for the Product content types.

Find Product in the list and click on Manage Fields to the right.

Toward the bottom of this page there is a line to add a new field.  Call the field Short Description.  For the field name, I used field_short_description.  The field was of type text using a text box for input.

Click Save at the bottom of the page to save this field.

Note:  If you have additional content types that are also products you can edit those as well.  However, do not add a new field.  Rather, you can share the field that you just created.  The place to do this is just below where you added the field (i.e. go to the second product type and scroll down to Existing).

Step 2:  Add Some Test Text

Edit one of the products that appears in the product grid.  When you scroll to the bottom of the page you will see a text box for the short desciption.  Enter some text and save.

Step 3:  Override the theme_uc_catalog_product_grid function in Ubercart

Ubercart has a function in ubercart\uc_catalog\uc_catalog.module called theme_uc_catalog_product_grid that takes $products as a parameter.

Find that function and copy it to the template.php file in your theme's directory.  If this file doesn't exist, create it.

Now rename the function by replacing "theme" with the name of your them.  My theme is fp_marketshare_6 so my function's signature looked like:

fp_marketshare_6_uc_catalog_product_grid($products) {

... function body here

}

Step 4:  Edit the Function to Include the Short Description

I added the following lines just above where the image is include.  (i.e. just above the line     $product_table .= '<span class="catalog-grid-image">'. $imagelink .'</span>';).

//Customization to add a short desctription
$short_description = $product->field_short_description[0]['value'];
$product_table .= '<span class="catalog-grid-short-description">'. $short_description .'</span>';
 

Notice that I added a class for the short description.

Step 5:  Edit the styles.css file to change the style of the short desctription.

In you themes styles.css file you can customize the look of the short description by simple adding the class.  The following example would make the text black.

catalog-grid-short-description{ color:#000000;}

Step 6: Fill in Short Descriptions for All of Your Products

Now you can go back and add a short description to your products.

So that is about it.  Don't hesitate to leave a comment or ask a question.