Add Category thumbnails to Storefront Gridport Theme Product Category pages

Here we are back on the subject of Storefront Themes Gridport theme. This is modification request number five!

The question

“I have “Show Product Category Thumbnails:” set to YES on Settings/Store/Presentation tab of WP e-Commerce settings but they do not appear on my Product Category pages. How do I make them appear?”

Well this theme is very deliberately clean and minimal. No category titles, no product titles in the Product category grid and more, or should I say less. I love it. Seems not everyone loves minimal. So how do you make those Category thumbnails appear? Not with a simple checkbox, you need to get dirty with some PHP to add that functionality. Really you people are getting soft with all these checkbox options. Time to lift the hood and see how it runs.
You will need to do one simple PHP edit. If you have not done this before see the note “Tools” at the bottom of this post.

Locate the wpsc-products_page.php file which is in the Gridport theme folder. Make a safe copy somewhere in case you have problems.
Find the code highlighted below. The example is from version 1.0.6, you should be able to find it easily in any version. In this example it was lines 8 to 11. Paste all of the remaining non highlighted code below into your file right after highlighted line 11 ?>.

$image_width  = get_option( 'product_image_width' );
$image_height  = get_option( 'product_image_height' );

        <?php if(wpsc_display_products()): ?>
		<?php if(wpsc_is_in_category()) : ?>
			<div class='wpsc_category_details'>
				<?php if(get_option('show_category_thumbnails') && wpsc_category_image()) : ?>
					<img src='<?php echo wpsc_category_image(); ?>' alt='<?php echo wpsc_category_name(); ?>' title='<?php echo wpsc_category_name(); ?>' />
				<?php endif; ?>
				<?php if(get_option('wpsc_category_description') &&  wpsc_category_description()) : ?>
					<?php echo wpsc_category_description(); ?>
				<?php endif; ?>
		<?php endif; ?>
        <?php endif; ?>


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,
Notepad++ for the PC

Leave a Reply