WP e-Commerce: add a product category grid to your themes homepage.

The question

Is there any way on the front page; under the sliding rotator to display the products (I only have 6) in a grid 3×2?

This was in relation to using the Storefront themes Boutique theme, but this example will work on most themes although the exact location you insert the PHP will vary. The name of the homepage template will vary. It should not be hard to see where in the homepage template you need to insert the code.

Answer

This took a little thinking about. At first I was going to add a huge chunk of code to the homepage template. Then I realized that with WP e-Commerce you already have a product category shortcode at your disposal. You will need to do some very basic PHP, jump in even if you have never done it before.

The setup

1. Make a Product Category and add the products to display to it. You could just call it homepage. Using a category actually gives you control over what displays on the home page if you should ever add more products. Also I admit I could not get it to work with all products for some reason, fail.

2. Go to the category list and open your Category for editing.
You will see about half way down “Display Category Shortcode:” with a code like this…
[wpsc_products category_url_name=’homepage’] Assuming that homepage is the name of your category. You will need to copy that code to add in the next step.

The PHP code

Now you need to edit some PHP. If you have not done this before see the PHP editing notes at the end of this post.
Open sft-tpl-home-1.php which is in the Boutique theme folder. Around line 63 you should find the first 3 lines below.

<?php if ( get_option('storefront_homepage_show_custom_message') == "true" ) {?>
		<div class="grid_12" id="homepage-middle"><h2><?php echo stripslashes(get_option('storefront_homepage_custom_message'));?></h2></div>
		<?php } ?>

Add a couple of extra empty lines after it, so you have 3 empty lines. Paste the code below on the middle one

<?php echo do_shortcode("[wpsc_products category_url_name='homepage']"); ?>
        <div class="clear"></div>

change the shortcode name to yours.
make sure you have the ” ” around the shortcode.

The look

The number of products in a a row will be determined by their size which is set on Settings/Store/Presentation tab “Default Product Thumbnail Size”
You can not easily make the image size different to that on the products page, well actually smaller you could do. Larger would become blurry. Here is some very basic CSS that would make the images and grid smaller, obviously this applies to the Boutique theme but it gives you an idea of what to look for. This would go in your custom css file. Not sure about doing that see the CSS notes below.

/*size of image */
.home img.product_image {
     height: auto;
     width: 100px;
}
/* width of complete grid item */
.home .default_product_display {
     width: 100px;
}
/* size of image container */
.home .imagecol {
     height: 100px;
     width: 100px;
}
/* position price tab if showing */
.home .sft-gridview-price {
     top: 0px;
}

If you are happy with the WP e-Commerce set size of the images but would prefer less per row, you can change the number per row for the homepage by making the container smaller on that page using CSS. Try this in your custom css, adjust the number to suit.

.home #default_products_page_container.wrap {
     width: 450px;
}

You may have things you do not want appearing. These can be removed with CSS. They depend on what you have in your settings for products page on Settings/Store/Presentation tab and Storefront Options Panel/Shop Settings Tab.
If you need help with the CSS let me know, I will need to see a link probably to be able to work out the specific CSS for your site. Use the Contact form on this site. I can work this out for you for a very small fee. Or just figure it out yourself, see the notes on CSS Tools below.