Storefront Designer theme, make the products page image link to the single product page
The question
A very specific post for the Storefront Themes Designer theme, the question was can the user be sent to the single product page when they click the product image on te products page or a category page. The default behavior is to open the image in a lightbox. The lightbox should only work on the single product page.
Answer
This is pretty easy. A small PHP edit. If you have never edited PHP see the notes and tools at the end of this post. This code id for Designer version 1.2.2 but should be basically the same in any version. The line numbers may be slightly different.
Code
Open wpsc-products_page.php which is in the Designer theme folder. Find this line around line 77.
<?php if(wpsc_the_product_thumbnail()) :
?>
<a rel="<?php echo wpsc_the_product_title(); ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>" href="<?php echo wpsc_the_product_image(); ?>">
<img class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(); ?>"/>
</a>
<?php else: ?>
<a href="<?php echo wpsc_the_product_permalink(); ?>">
<img class="no-image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="No Image" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo WPSC_CORE_THEME_URL; ?>wpsc-images/noimage.png" width="<?php echo get_option('product_image_width'); ?>" height="<?php echo get_option('product_image_height'); ?>" />
</a>
<?php endif; ?>
Replace the highlighted lines as in the code below
<?php if(wpsc_the_product_thumbnail()) :
?>
<a rel="<?php echo wpsc_the_product_title(); ?>" href="<?php echo wpsc_the_product_permalink(); ?>">
<img class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(); ?>"/>
</a>
<?php else: ?>
<a rel="<?php echo wpsc_the_product_title(); ?>" href="<?php echo wpsc_the_product_permalink(); ?>">
<img class="no-image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="No Image" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo WPSC_CORE_THEME_URL; ?>wpsc-images/noimage.png" width="<?php echo get_option('product_image_width'); ?>" height="<?php echo get_option('product_image_height'); ?>" />
</a>
<?php endif; ?>
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/
1 Comment
Jason
January 8, 2013Hi, I’d like to firstly thank you for your insights in to the Elegance Theme. You’ve got me so much further down the road. It’s a tricky beast but well worth the customisations. I’d also like to ask if you can shed some light on why I might not be able to display the ‘single product’ page when I click the image. It’s as though the product item has no info or image, so it displays nothing!? Thanks!