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.


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.


If not using the Boutique theme find the homepage template for your theme. It will probably be named quite obviously, we do not deliberately code stuff to make it hard for you, look for something like home,php or homepage.php. Where you insert the code will depend on where in your page layout you want the grid. You will probably see obvious sections that refer to things like a Slider or Footer Widgets on your homepage to help you place your products grid.

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.

PHP Tools:

You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

Custom CSS:

This code belongs in your Custom CSS file. Don’t have a custom.css? There is an empty one for you to use in the theme folder? You can edit custom.css by going to Appearance/Editor and choosing custom.css from the list of files.
You can also just paste this code in the “Custom CSS” box in the Storefront options panel on the Style tab if you will not be making many changes, but it is a bit hard to work with there.

Tools for finding the CSS to adjust:

I recommend you use Firefox browser for development because it has a great add on Firebug which no developer should live without (I use chrome as my browser but always use Firefox for working on my sites). This will help you find the CSS tags you need yourself.
Get Firebug here and find a intro to firebug video.
This video also does a nice job of showing css editing in firebug.
Watch out for Firefox’s built in tools now, I prefer Firebug still but both have their place. Your menu when you click on something will have “Inspect Element” which will bring up the Firefox tools, “inspect Element with Firebug” which obviously will bring up Firebug. It can be a little confusing, I still click the wrong one sometimes.
A TIP live editing your CSS
1. swap to CSS on the top firebug bar.
2. just below that you will see a css file name and a little arrow. Click and select custom.css from the list.
3. on the left where it says “Live Edit” click so it is grey and all the CSS goes black instead of color. You can now type CSS that will effect the site you are looking at just like it would if you were editing the real file. The changes will take effect as you type. Once you refresh the page the stuff you added will disappear, You can always copy and paste it back again. You can flip between CSS and HTML modes, or do an inspect item, without losing the css

Leave a Reply