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

Posted in WordPress • Posted on 13 Comments

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$)

Foreword

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.

Requirements

Introduction

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.

Background

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

<?php
<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)
$wpsc_count_products_rows++;
...
equalbox">
?>

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

The complete PHP/HTML Code

<?php
// 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">

  // CHECK IF THE THUMBNAILS SHOULD BE VISIBLE (define on admin area)
<div>
<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>
<div>
<a href="<?php echo wpsc_the_product_permalink(); ?>">
No Image Available
</a></div>
</div>
<div>
<h2>

<a href="<?php echo wpsc_the_product_permalink(); ?>"></a></h2>
<a href="<?php echo wpsc_the_product_permalink(); ?>">
<div>
  // CHECK IF IT IS A DONATION
<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' />

  // OR A SPECIAL PRICE
<span class="oldprice">: </span>
<span id="product_price_<?php echo wpsc_the_product_id(); ?>">:  </span>
:</div>
</a>

product);
do_action('wpsc_product_addons', wpsc_the_product_id());
?>
<div class="wpsc_description"></div>
$the_addl_desc);
}

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));
}
?>
<!--
<div">
<a href=''>Learn more</a></div>
-->

The CSS

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;
    float:left;
    font-size:11px;
    margin:5px;
    padding:5px;
    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*/
    margin-right:auto;
    text-align:center;
}
.wpsc_product_price { /* Here is the price with the purple effect*/
    color: #fff;
    text-decoration: none;
    padding:10px 10px 5px;
    margin:10px;
    text-align:center;
    font-size:10pt;
    -moz-border-radius: 4px; /* add a small round corner */
    -webkit-border-radius: 4px;
    border-radius: 4px; /* future proofing */
    background:#6f1048;
    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
wpsc_total_product_count()

//Displays the current page number
wpsc_current_page()

//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:


<?php
<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!

Conclusion

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?

4 Written ArticlesWebsite

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.

13 Comments Best Comments First
  • DJaVuPixel

    Wednesday, September 8th, 2010 17:56

    1

    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…

    0
  • Phil

    Sunday, October 3rd, 2010 23:30

    6

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

    Any wise words, anyone?

    0
  • djavupixel

    Thursday, September 23rd, 2010 11:12

    5

    @ 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!

    0
  • gopalb

    Thursday, September 16th, 2010 18:19

    4

    hi,
    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.

    0
  • Mennes

    Wednesday, September 8th, 2010 15:21

    2

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

    0
  • Mike

    Sunday, September 12th, 2010 05:09

    3

    “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.

    0
  • Jermaine Oppong

    Monday, October 25th, 2010 11:42

    7

    on line 28 of the complete PHP/HTML code, i think you meant to put
    product[]; ?>

    instead of

    product[

    0
  • Josh

    Sunday, October 31st, 2010 17:06

    8

    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?

    0
    • Tommy

      Tuesday, April 12th, 2011 07:16

      11

      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.

      0
  • jafor

    Wednesday, December 7th, 2011 08:23

    13

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

    0
  • Jatin Soni

    Monday, November 21st, 2011 12:18

    12

    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.

    0
  • John

    Thursday, December 2nd, 2010 17:33

    9

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

    0
  • Tommy

    Tuesday, April 12th, 2011 06:21

    10

    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?

    0
  • jafor

    Wednesday, December 7th, 2011 08:23

    13

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

    0
  • Jatin Soni

    Monday, November 21st, 2011 12:18

    12

    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.

    0
  • Tommy

    Tuesday, April 12th, 2011 06:21

    10

    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?

    0
  • John

    Thursday, December 2nd, 2010 17:33

    9

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

    0
  • Josh

    Sunday, October 31st, 2010 17:06

    8

    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?

    0
    • Tommy

      Tuesday, April 12th, 2011 07:16

      11

      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.

      0
  • Jermaine Oppong

    Monday, October 25th, 2010 11:42

    7

    on line 28 of the complete PHP/HTML code, i think you meant to put
    product[]; ?>

    instead of

    product[

    0
  • Phil

    Sunday, October 3rd, 2010 23:30

    6

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

    Any wise words, anyone?

    0
  • djavupixel

    Thursday, September 23rd, 2010 11:12

    5

    @ 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!

    0
  • gopalb

    Thursday, September 16th, 2010 18:19

    4

    hi,
    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.

    0
  • Mike

    Sunday, September 12th, 2010 05:09

    3

    “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.

    0
  • Mennes

    Wednesday, September 8th, 2010 15:21

    2

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

    0
  • DJaVuPixel

    Wednesday, September 8th, 2010 17:56

    1

    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…

    0

Comments are closed.

54.227.222.235 - unknown - unknown - US