Add Product Images to the Shopp Cart and Checkout Pages

by Lorenzo Orlando Caum on March 3, 2013

In this tutorial, we’ll learn how to add cart images to our cart & checkout pages. This will help customers “see” the specific items that are in their cart.

You’ll need to have Shopp templates enabled.

Go to WP-admin –> Shopp Setup –> Presentation. If templates are already enabled, you’ll see a checkmark for templates. If you do not see this, then follow the instructions for setting them up.

Specifically, you’ll need to login to your site with a FTP client. A free option is FileZilla. We recommend Transmit (if you are on a Mac).

Next browse to your theme folder and create a shopp subfolder in it. Once setup, you’ll see that you now have a set of Shopp files in the new Shopp subfolder similar to this location:

wp-content/themes/yourthemefolder/shopp/

Make Edits to the Summary.php file

The code that displays the cart contents and information is located in the summary.php.

Login to your site with your preferred FTP client and browse to the following location: wp-content/themes/yourthemefolder/shopp and open the summary.php file.

This is the section of code that we’ll be modifying:

<?php if (shopp('cart','hasitems')): ?>
<div id="cart" class="shopp">
<table>
<tr>
<th scope="col" class="item"><?php _e('Cart Items','Shopp'); ?></th>
<th scope="col"><?php _e('Quantity','Shopp'); ?></th>
<th scope="col" class="money"><?php _e('Item Price','Shopp'); ?></th>
<th scope="col" class="money"><?php _e('Item Total','Shopp'); ?></th>
</tr>

<?php while(shopp('cart','items')): ?>
<tr>
<td>
<a href="<?php shopp('cartitem','url'); ?>"><?php shopp('cartitem','name'); ?></a>
<?php shopp('cartitem','options','show=selected&before= (&after=)'); ?>
<?php shopp('cartitem','inputs-list'); ?>
<?php shopp('cartitem','addons-list'); ?>
</td>
<td><?php shopp('cartitem','quantity'); ?></td>
<td class="money"><?php shopp('cartitem','unitprice'); ?></td>
<td class="money"><?php shopp('cartitem','total'); ?></td>
</tr>

<?php endwhile; ?>

We first need to add a new table heading for our images. We’ll call it “Item Pictures”. Next we will add the code to call the image for each product and save changes.

Here is the updated code:

<?php if (shopp('cart','hasitems')): ?>
<div id="cart">
<table>
<tr>
<th scope="col"><?php _e('Item Pictures','Shopp');?></th>
<th scope="col"><?php _e('Cart Items','Shopp'); ?></th>
<th scope="col"><?php _e('Quantity','Shopp'); ?></th>
<th scope="col"><?php _e('Item Price','Shopp'); ?></th>
<th scope="col"><?php _e('Item Total','Shopp'); ?></th>
</tr>

<?php while(shopp('cart','items')): ?>
<tr>
<td>
<?php shopp('cartitem','coverimage', 'size=64'); ?>
</td>
<td>
<a href="<?php shopp('cartitem','url'); ?>"><?php shopp('cartitem','name'); ?></a>
<?php shopp('cartitem','options','show=selected&before= (&after=)'); ?>
<?php shopp('cartitem','inputs-list'); ?>
<?php shopp('cartitem','addons-list'); ?>
</td>
<td><?php shopp('cartitem','quantity'); ?></td>
<td><?php shopp('cartitem','unitprice'); ?></td>
<td><?php shopp('cartitem','total'); ?></td>
</tr>

<?php endwhile; ?>

Here is an example of what it looks like on a live site:

Screen-Shot-2013-03-03-at-8.01.59-PM

See more options for shopp cartitem, coverimage.

Related Posts Plugin for WordPress, Blogger...
  • Was this post helpful to you?
    Join our newsletter to receive updates!
  • Author: Lorenzo Orlando Caum

    Lorenzo Orlando Caum is the founder of Enzo12 LLC, a web engineering firm in Tampa, FL.

    Lorenzo contributes to the Shopp project as a member of the support team. He has written several WordPress extensions for Shopp.

    If you would like to know more about Lorenzo, you can follow @lorenzocaum on Twitter or check out his blog.

    Previous post:

    Next post: