How to Build a Custom WP e-Commerce Theme (Part 2)

In this tutorial you will learn how to create a grid view in WP e-Commerce without the Premium Gold Cart Plugin, create your own method to display recently added products, advanced pagination techniques and some nice CSS3 effects to your grid. (Note that I recommend you to buy the Golden Cart Plugin as it has nice features and it cost only 40$)


Before you start this tutorial you should read the first part of this tutorial: How to Build a Custom WP e-Commerce Theme (Part 1). In case you want to start your first e-Commerce shop I also suggest you reading this: A Crash Course in Creating E-Commerce Websites with WordPress.



In this article I will explain how to design the Product Page within WP e-Commerce to give better usability and a more attractive design. Here below is a picture of what we are going to do today. You will also find the source code and a live preview.


In the first tutorial we duplicated the “default” theme and renamed it to “djavu-shop”. We are only going to work of the “djavu-shop” folder! For this tutorial we need the EqualHeights jQuery Plugin. Download it and save it into “djavu-shop/js/jquery.equalheights.js”. As this plugin requires jQuery please check if your theme loads it to avoid errors.

In this theme the administrator of the e-commerce platform can give a (brief) description of the product in the main page. A drawback is that you do not know how much he is going to write. A few possibilities exists to deal with this problem. Here is my solution. A row has 3 columns. For every row I check the tallest column and make the other columns of this row the same height. Personally I think this is a good solution but if you have a better one feel free to share!

Creating the Grid View

Now open up your product-page.php file within your theme. As we are in a loop every time we get a new product we update $wpsc_count_products. If we pass through 3 items we increase $wpsc_count_products_rows. If this is the case we increase the number of the class equalbox+1. So if we have 9 products we would have 3 rows. In the first row the 3 items will have the class equalbox1, in the second row the 3 items will have the class equalbox2, etc…

Here is the code

<div>// Count n# of products</div>
<div>$wpsc_count_products = 0;</div>
// Count n# of rows
<div>$wpsc_count_products_rows = 0;</div>
/* Check if we have 3 columns of products and if yes we add a new row.
* So all products in a column will have the same height because we use jQuery Equalheights
if ( ($wpsc_count_products % 3) == 0)

Please read the commented lines as it is easier to explain.

The complete PHP/HTML Code

// Count products
$wpsc_count_products = 0;
$wpsc_count_products_rows = 0;
<div id="my-container">
<div class="box productdisplay default_product_display equalbox<?php echo $wpsc_count_products_rows; ?>">  // HERE WE PUT THE ROW NUMBER
<div class="box-col">

<a rel="<?php echo str_replace(array(">" href="">
<img id="product_image_<?php echo wpsc_the_product_id(); ?>" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" />
<a href="<?php echo wpsc_the_product_permalink(); ?>">
No Image Available

<a href="<?php echo wpsc_the_product_permalink(); ?>"></a></h2>
<a href="<?php echo wpsc_the_product_permalink(); ?>">
<label for="donation_price_<?php echo wpsc_the_product_id(); ?>">:</label>
<input id="donation_price_<?php echo wpsc_the_product_id(); ?>" name="donation_price" type="text" value="<?php echo $wpsc_query->product[" />' size='6' />

<span class="oldprice">: </span>
<span id="product_price_<?php echo wpsc_the_product_id(); ?>">:  </span>

do_action('wpsc_product_addons', wpsc_the_product_id());
<div class="wpsc_description"></div>

if( isset($addl_descriptions['addl_desc']) ) {
$value = $addl_descriptions['addl_desc'];

if( function_exists('wpsc_addl_desc_show') ) {
echo wpsc_addl_desc_show( $addl_descriptions );
} else {
echo stripslashes( wpautop($the_addl_desc, $br=1));
<a href=''>Learn more</a></div>


A product is on a div of class box which has a width of 190px (+10px padding). The class wpsc_product_price has some CSS3 effects such as a gradient. You can change the colors of the gradient if you do not like. Remember to add a default background color so that “old browsers” can still display it correctly. Round corners have also been added.

The CSS Code

 * Product Page - Display the boxes with the products
 * 3 column design
.box {
    border: 1px solid #ddd;
    width: 190px;
.box:hover {
    border: 1px solid #bbb;
.box-col .box-producttext p {
    font-size: 9pt !important;
    line-height:160% !important; /*so it cannot be overridden*/
.box-col h2 {
    color: #666;
    text-align: center;
.box-col .prodtitles a{
    color: #666;
    text-align: center;
.box-col .box-imagecol {
    margin-left:auto; /* Align the picture in the center and the text also*/
.wpsc_product_price { /* Here is the price with the purple effect*/
    color: #fff;
    text-decoration: none;
    padding:10px 10px 5px;
    -moz-border-radius: 4px; /* add a small round corner */
    -webkit-border-radius: 4px;
    border-radius: 4px; /* future proofing */
    background: -webkit-gradient(linear, left top, left bottom, from(#9e005d), to(#5d1740)); /* here a gradient */
    background: -moz-linear-gradient(top,  #9e005d,  #5d1740);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e005d', endColorstr='#5d1740');
.wpsc_product_price a {
    border: 0;
    text-decoration: none;

Advanced Pagination Techniques

Here below are some Advanced Pagination Techniques for WP e-Commerce. This Plugin does not work with other pagination plugins of WordPress!

//Displays page numbers
wpsc_pagination( $show ) // If you give 5 as input and if there are 10 pages of products, it will only show 5 page links at a time</pre>
$show (int) (optional) //The maximum number of pages to show at a time. -1 will show all pages.

//Displays previous and next links
wpsc_previous_products_link( $text, $show_disabled )
wpsc_next_products_link( $text, $show_disabled )
$text (string) (optional) //The text to use for the link.
$show_disabled (bool) (optional) //Wether it should show (the previous or next) text even if there is no previous page. Default: false

//Displays link to first and last product
wpsc_first_products_link( $text, $show_disabled )
wpsc_last_products_link( $text, $show_disabled )
$text (string) (optional) // The text to use for the link.
$show_disabled (bool) (optional) //Wether it should show (the first or last) text even if there is no previous page. Default: false

//Displays the total number of products

//Displays the current page number

//Displays in which page you are.
wpsc_showing_products_page() // Example: Page "3 of 7".

//Shows the number of  currently viewed products.
wpsc_showing_products() // Example you have 100 products and the user is seeing the products from "30 to 39"

//My default settings for this theme
Showing <?php echo wpsc_showing_products(); ?> of <?php echo wpsc_total_product_count(); ?> products <br/><!-- Number of products showing -->
Page <?php wpsc_showing_products_page(); ?>:
<?php echo wpsc_first_products_link( '&laquo;', false ); ?>
<?php echo wpsc_previous_products_link( 'previous', false ); ?>
<?php echo wpsc_pagination( 5 ); ?> <!-- Limit the amount of pages -->
<?php echo wpsc_next_products_link( 'next', false ); ?>
<?php echo wpsc_last_products_link( '&raquo;', false ); ?>

More on pagination here

Display recently added products without the WP e-Commerce function (for more flexibility)

What I am going to show you now can enable you to do great things with WP e-Commerce but use it at your own risk! With $wpdb->get_results() you can do a db query which is really nice! This makes wp e-commerce really powerful and your imagination is your only limit! Please check the db relationship before playing around.

Here is the code:

<pre>get_results("SELECT `id`,`name` FROM `".WPSC_TABLE_PRODUCT_LIST."` ORDER BY `date_added` DESC LIMIT 5");
   echo 'Recently added products
   for( $i=0; $iid."&thumbnail=".true."&width=32&height=32";
      echo '<a href="',wpsc_product_url($category_name[$i]->id),'"><img src="',$image_path,'" alt="" /> ',$category_name[$i]->name, '</a>

As $wpdb->get_result() returns an array you have to go through the whole loop to display the latest products. In $image_path we create a thumbnail out of the product id. That’s why we selected the id in the sql query. In the query we choose to select the 5 last products. You could also put 5 random products, etc…

In the next tutorial we are going to focus more on this!


That’s all! I hope you enjoyed this tutorial and find it useful! Now you should be able to do a clean grid view. Note that equalheights is sometimes a bit buggy.

Remember as I said in the tutorial before: Make a temporary install of WP e-Commerce and fill it with dummy content! This will really help understanding how WP e-Commerce works and will also help to find errors.

In the following tutorial I will focus on the single-product page as you can see it on the demo!

Further Discussion

Have some thoughts of this theme? Give them to me, I’d love to hear them. This is as more a proof of concept than a tutorial. It introduces html, css, jQuery, PHP and the WP e-Commerce plugin. I’m sure there will be people out there who will feel that a perfect e-commerce start page is something else. If so, what would you do?

Leonel Hilario

Leonel Hilario is a young old man living in Luxembourg. In his free time he adores to drink George Clooney's coffee, traveling, going out and more :) After years of being a professional web designer and developer, he decided to start blogging and tweeting.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now


  1. jafor says

    Hi if you said that free download then why your link is broken this not professional.
    Thank you.

  2. Jatin Soni says

    Nice tutorial I found and will follow to get desire result for my website. However Preview and Download link is broken, not getting either preview page or file to download.

  3. Tommy says

    The code for “Display recently added products without the WP e-Commerce function (for more flexibility)” is not correct, items are missing. Can you please post the correct code?

  4. John says

    Preview for this theme doesn’t work properly. looks as if there is a fault with stylesheet?

  5. Josh says

    Using your code to display recent products does not work. It results in the page appearing blank. I think there’s an issue with the syntax of the code, possibly a missing closing tag?

    • Tommy says

      Hi Josh, the code looks to be corrupted. It is missing several things… I am trying to figure it out. Will post solution if I find/figure it out.

  6. Phil says

    Looks great, but I installed it and it doesn’t even appear in my drop-down of themes under Presentation.

    Any wise words, anyone?

  7. says

    @ BigPines: During the post of this article some stuff went wrong and I may be possible that some closing divs are missing. Just download the tutorial and everything should be ok.
    @gopalb: 1. yes I still haven’t done this page but I will :)
    2. I am not sure with what you mean with preview link? You can add a link to the single product by doing this

    <a href="”> echo wpsc_the_product_permalink(); <a / “>
    “remove the gaps – i had to do it so that it will print correctly”
    Sorry for the delay!

  8. gopalb says

    Nice tutorial…but, i have some question about this theme..

    1. shopping_cart_page.php there is no css for table.
    2. I want to add a “Preview” button in product page with link. how to do that?

    I was really looking forward to part 3 for other pages.
    Thanks a lot for providing the resource.

  9. Mike says

    “The complete PHP/HTML Code” above looks to be a fragment and it doesn’t compile as far as I can tell. It seems pretty obvious there are not enough closing div tags. Did I misunderstand something? Part 1 of this tutorial went very smooth. I was really looking forward to part 2. Did something get munched in the code?

    Thanks for providing the resource.

  10. Mennes says

    Clear overview how to fix css codes for an eCommerce theme.
    But I should give the background more soft shadow, to create some depth.

  11. says

    Effectively it is possible to play a bit with the background. A dark background make the “pictures come out”. Choosing other colors make also a difference on how the client will perceive the products -> cheap, professional, high quality, luxury etc…