{"id":2041,"date":"2011-11-30T18:54:02","date_gmt":"2011-11-30T17:54:02","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?p=2041"},"modified":"2014-04-21T08:04:56","modified_gmt":"2014-04-21T07:04:56","slug":"multiple-images-on-wp-e-commerce-product-pages","status":"publish","type":"post","link":"https:\/\/www.simonbattersby.com\/blog\/2011\/11\/multiple-images-on-wp-e-commerce-product-pages\/","title":{"rendered":"Multiple images on WP e-Commerce product pages"},"content":{"rendered":"

Dismayed this morning to find that WP e-Commerce does not support multiple images on a product page unless you pay for the “gold cart” option. Since I’m basically stingy, I did it myself. Here’s how:<\/p>\r\n\r\n

Original fix, WP3.5, WPEC 3.8.7.6<\/h3>\r\n
\r\n

I replaced this code in wpsc-single_product.php<\/code>:<\/p>\r\n\r\n

   <?php if ( wpsc_the_product_thumbnail() ) : ?>\r\n      <a rel=\"<?php echo wpsc_the_product_title(); ?>\" class=\"<?php echo wpsc_the_product_image_link_classes(); ?>\" href=\"<?php echo wpsc_the_product_image(); ?>\">\r\n         <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(get_option('product_image_width'),get_option('product_image_height'),'','single'); ?>\"\/>\r\n      <\/a>\r\n      <?php if ( function_exists( 'gold_shpcrt_display_gallery' ) )\r\n         echo gold_shpcrt_display_gallery( wpsc_the_product_id() );\r\n      ?>\r\n   <?php else: ?><\/pre>\r\n\r\n
with this code:<\/p>\r\n\r\n
   <?php if ( wpsc_the_product_thumbnail()) :\/\/if the product has any images...\r\n<\/span>      if (has_post_thumbnail()): \/\/...display the thumbnail if there is one...?<\/span>>\r\n<\/span>         <a rel=\"lightbox[<?php echo wpsc_the_product_title(); ?>]\" class=\"<?php echo wpsc_the_product_image_link_classes(); ?>\" href=\"<?php echo wpsc_the_product_image(); ?>\">\r\n         <?php echo get_the_post_thumbnail(wpsc_the_product_id(),'thumbnail',array('alt' => wpsc_the_product_title(),'title' => wpsc_the_product_title() ));?>\r\n         <\/a>\r\n      <?php endif;\r\n      sb_get_images_for_product(wpsc_the_product_id());\/\/...and then display all the rest of the images\r\n<\/span>else: ?><\/pre>\r\n\r\n
I’ve used the standard WP function get_the_post_thumbnail()<\/code> instead of the WP e-commerce function wpsc_the_product_thumbnail()<\/code> simply to ensure a consistent display of thumbnails. So, I’m displaying the product thumbnail and then using a custom function sb_get_images_for_product()<\/code> to retrieve any other images associated with the product. This function effectively replaces the gold_shpcrt_display_gallery()<\/code> function for which you have to pay. I saved sb_get_images_for_product()<\/code> in the functions.php (located in the theme folder). This function retrieves all images attached to the post and then displays any which are not the thumbnail – we’ve already displayed that. Here’s the code (last tested against WP 3.5):<\/p>\r\n
function sb_get_images_for_product($id){\r\n   global $wpdb;\r\n   $post_thumbnail = get_post_thumbnail_id();\/\/read the thumbnail id\r\n<\/span>   $attachments = $wpdb->get_results($wpdb->prepare(\"SELECT * FROM $wpdb->posts WHERE post_parent = $id AND post_type = 'attachment' ORDER BY menu_order ASC\",$id));\r\n   foreach ($attachments as $attachment){\r\n      if ($attachment->ID <> $post_thumbnail){\/\/if we haven't already got the attachment as the post thumbnail\r\n<\/span>         $image_attributes = wp_get_attachment_image_src($attachment->ID,'thumbnail');?>\r\n\t<a rel=\"lightbox[<?php echo wpsc_the_product_title(); ?>]\" href=\"<?php echo $attachment->guid; ?>\" class=\"<?php echo wpsc_the_product_image_link_classes(); ?>\">\r\n\t<img src=\"<?php echo $image_attributes[0]; ?>\" alt=\"<?php echo wpsc_the_product_title(); ?>\"\/>\r\n\t<\/a>\r\n   <?php }\t\t\r\n   }\r\n}<\/pre>\r\n
Note that WP 3.3 changed the way images work and messed up the WP e-commerce product images on version 3.8.7.4, with the result that it's possible to have a product without a product thumbnail. This is fixed with WP e-commerce version 3.8.7.6. However, I've added the if (has_post_thumbnail())<\/code> condition in the first code snippet above to trap this. Thanks to Brian for flagging this up.<\/p>\r\n<\/div>\r\n
Updated 21 April 2014, tested against WP 3.9, WPSC 3.8.13.4<\/h3>\r\n
Somewhere along the line, in conjunction with core WP galleries, WPEC has changed the way additional images are handled, and the fix above no longer works. Now try making this replacement in wpsc-single_product.php<\/code>. Change this:<\/p>\r\n
<?php\r\nif ( function_exists( 'gold_shpcrt_display_gallery' ) )\r\n   echo gold_shpcrt_display_gallery( wpsc_the_product_id() );\r\n?><\/pre>\r\n
with this:<\/p>\r\n
<?php\r\n\tsb_get_images_for_product(wpsc_the_product_id());\/\/...and then display all the rest of the images\r\n<\/span>?><\/pre>\r\n
and add this to your functions.php:<\/p>\r\n
function sb_get_images_for_product($id){\r\n   $post_thumbnail = get_post_thumbnail_id();\/\/read the thumbnail id\r\n<\/span>   \r\n   $atts = get_post_meta($id,'_wpsc_product_gallery');\r\n   \r\n   $attachments = $atts[0];\r\n   \r\n   foreach ($attachments as $attachment){\r\n      if ($attachment<> $post_thumbnail){\/\/if we haven't already got the attachment as the post thumbnail\r\n<\/span>         $image_attributes = wp_get_attachment_image_src($attachment,'post-thumbnail');\r\n\t\t $full_image_attributes = wp_get_attachment_image_src($attachment,'full');\r\n\t\t ?>\r\n\t<a rel=\"lightbox[<?php echo wpsc_the_product_title(); ?>]\" href=\"<?php echo $full_image_attributes[0]; ?>\" class=\"<?php echo wpsc_the_product_image_link_classes(); ?>\">\r\n\t<img src=\"<?php echo $image_attributes[0]; ?>\" alt=\"<?php echo wpsc_the_product_title(); ?>\"\/>\r\n\t<\/a>\r\n   <?php }\t\t\r\n   }\r\n}<\/pre>\r\n\r\n\r\n