product);
do_action('wpsc_product_addons', wpsc_the_product_id());
?>

$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));
}
?>

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

$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 of products

Page :

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:

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 ' ',$category_name[$i]->name, '
';
   }
?>
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?