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:
Original fix, WP3.5, WPEC 3.8.7.6
I replaced this code in wpsc-single_product.php:
<?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(get_option('product_image_width'),get_option('product_image_height'),'','single'); ?>"/>
</a>
<?php if ( function_exists( 'gold_shpcrt_display_gallery' ) )
echo gold_shpcrt_display_gallery( wpsc_the_product_id() );
?>
<?php else: ?>
with this code:
<?php if ( wpsc_the_product_thumbnail()) ://if the product has any images... if (has_post_thumbnail()): //...display the thumbnail if there is one...?> <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(); ?>"> <?php echo get_the_post_thumbnail(wpsc_the_product_id(),'thumbnail',array('alt' => wpsc_the_product_title(),'title' => wpsc_the_product_title() ));?> </a> <?php endif; sb_get_images_for_product(wpsc_the_product_id());//...and then display all the rest of the images else: ?>
I’ve used the standard WP function get_the_post_thumbnail() instead of the WP e-commerce function wpsc_the_product_thumbnail() 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() to retrieve any other images associated with the product. This function effectively replaces the gold_shpcrt_display_gallery() function for which you have to pay. I saved sb_get_images_for_product() 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):
function sb_get_images_for_product($id){
global $wpdb;
$post_thumbnail = get_post_thumbnail_id();//read the thumbnail id
$attachments = $wpdb->get_results($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE post_parent = $id AND post_type = 'attachment' ORDER BY menu_order ASC",$id));
foreach ($attachments as $attachment){
if ($attachment->ID <> $post_thumbnail){//if we haven't already got the attachment as the post thumbnail
$image_attributes = wp_get_attachment_image_src($attachment->ID,'thumbnail');?>
<a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" href="<?php echo $attachment->guid; ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>">
<img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo wpsc_the_product_title(); ?>"/>
</a>
<?php }
}
}
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()) condition in the first code snippet above to trap this. Thanks to Brian for flagging this up.
Updated 21 April 2014, tested against WP 3.9, WPSC 3.8.13.4
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. Change this:
<?php if ( function_exists( 'gold_shpcrt_display_gallery' ) ) echo gold_shpcrt_display_gallery( wpsc_the_product_id() ); ?>
with this:
<?php
sb_get_images_for_product(wpsc_the_product_id());//...and then display all the rest of the images
?>
and add this to your functions.php:
function sb_get_images_for_product($id){
$post_thumbnail = get_post_thumbnail_id();//read the thumbnail id
$atts = get_post_meta($id,'_wpsc_product_gallery');
$attachments = $atts[0];
foreach ($attachments as $attachment){
if ($attachment<> $post_thumbnail){//if we haven't already got the attachment as the post thumbnail
$image_attributes = wp_get_attachment_image_src($attachment,'post-thumbnail');
$full_image_attributes = wp_get_attachment_image_src($attachment,'full');
?>
<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(); ?>">
<img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo wpsc_the_product_title(); ?>"/>
</a>
<?php }
}
}
Tags: wordpress, wp e-Commerce
Hi Ryan
You can select the image size using
wp_get_attachment_image_src($attachment,'large');Is there an update to the code in post 23 to display smaller thumbnails below the main image?
i found 3 different code fixes like this, and this is the only one that worked. needed a little css but works great.2015
Hi Kamelia
Just tried this and the amended code from 21 April works fine with WP3.9.2 and WPEC 3.8.1.14.1. Make sure you’ve flushed the theme cache via Settings > Store > Presentation to ensure WordPress uses your amended copy of
wpsc-single_product.php.Hi Simon,
The things you`ve done are great, but i can`t intergrate this for WP 3.9.2 WPSC 3.8.14.1. Do you think if it`s possible they had changed something in the algorithm?
Hi Matt
Sorry for the delay in responding, I haven’t had the time to look into this. The latest changes require a complete rewrite of the code, which is described above.
After the 3.8.1 WP update, new products added weren’t showing multiple (or any) images. I updated wpec too (3.8.13.4), and double checked everything was in the right place (code in single_product and theme’s functions file). I’m sure it is because older products still show multiple images. Just nothing new that gets added.
I’ve had problems with media on other sites as a result of the 3.8.1 auto update but the fix that worked on those hasn’t helped here.
Any ideas?
Simon,
I’ve got it fixed.
I forgot to add the css class.
thx!
That sounds like you might just need to make sure you’ve flushed the theme cache via Settings > Store > Presentation.
Hi simon,
Thx for the quick response!
Meanwhile I got it to work. I figured out that I have to re-add the gallery per product after the code change. I’m not sure wether that’s normal. Also, I’ve added the modification to show only one thumbnail instead of all of them. Still the page keeps showing all thumbs. Do I have to re-add all those gallery’s again? I hope not…
Have you added the code to your theme’s functions.php as well as the product page? Are you seeing any errors generated?
Hi Simon,
Seems like this fix worked for a lot of people.
However, when I add the suggested changes, no image thumbnails are displayed at all. When I inspect the page source, there’s no sign of the img links either. I’m on WP 3.8.1 and the plugin is 3.8.13.3.
I’m using the 2014 theme with some modifications.
Hope you can help me out 😉
So that’s the unchanged code on the page? There’s obviously nothing I can suggest from that. When you apply the modified code, do you get any errors? If you view the source of the page is the image included, or not?
I changed my code back because it wasn’t working….
I am trying to have one thumbnail (the featured image) display on the product page and the other two pop up in the lightbox. When I added the code you provided, all thumbnails disappeared (including the featured image). This post has three images attached to it but non of them display here: http://nonstudio.info/homesteadapothecary/products-page/all/skin-lymph/
Are the additional images included in your page? I couldn’t see them on the page I viewed, but maybe I picked the wrong product. I’m not sure exactly what your problem is I’m afraid – what is it that you want to happen that’s not happening? Do you have no thumbnails at all?
Hello Simon!
First off, thanks so much for this great fix.
I am trying to work according to comment #10 but am having trouble displaying the thumbnail image (it seems to be hiding with the others). I’ve added a class called .hidden to my stylesheet. Am I doing something wrong?
Hello sir Simon, I fixed this website http://philippinesteel.com (update wordpress, make it more secure etc) but upon checking this website still using the old e-commerce 3.6.7 before the wp e-commerce, my main problem is I can’t upload new category photos every time I tried it shows no photo, I dont want to update it because client dont want also it is a waste of time since client already like the entire features, what is your advise? thanks a lot
Got it taken care of and everything’s working just the way I want it to. Thanks so much for your help Simon! You rock!!!
If I view the generated html on that page now, there are no additional images that I can see. There were yesterday, so something you have done has removed them. You can check this yourself by viewing the source.
Thanks so much for all your help Simon and so quickly! I really appreciate it.
I updated the wpsc-products_page.php file to include lightbox[ as noted in #103. Was this the correct file to amend? I flushed the cache, but still see no change, leading me to believe I changed the wrong file.
You don’t need to do this in jQuery – just amend the PHP code that’s generating your image link. Amend the code on the category page that shows the image so that the rel attribute matches that generated by the function sb_get_images_for_product. So the rel attribute in your PHP code should look like this:
At the moment it probably looks like this:
You can check the attribute by viewing the page source.
do you have an out of the box code for jquery that would work to change all rel attributes automatically? I found a few around the web, but they won’t work without some customization and I don’t know jquery too well.
See the edit on my previous reply.
http://hotheadz.feedmyplanet.com/products-page/pre-made-hats
Each product on this page has 2 images attached to it. Both were added via the Manage Product Images link under the Product Images section when adding a new product or updating one. Then I set one as a featured image.
Only the featured imaged ever shows. Even if I don’t have a featured image set for a product, only the first image I attached to the product will display
That just sounds like something’s not right on the page, like the images are not linked via the rel attribute. Can you provide an example of a page where you’re experiencing the issue?
EDIT: Yes, if I look at the Pre-Made hats page the rel attribute for the displayed image is ‘Size 7 1/4-Style 1’, but that for the hidden image is ‘lightbox[Size 7 1/4-Style 1]’. Make these the same and both images should display in the lightbox.
Simplest way to do this would be to just hide the second thumbnail with css, then everything else is unchanged.
Hi Simon,
I followed your suggestion for Farhad in #10 by creating the hidden class and adding CSS, but the lightbox doesn’t pick up the extra image and I’m back to where I started before changing any code.
Could this be an issue with the WP E-Commerce lightbox not seeing the multiple images? Is there a php command around this or shall I disable the lightbox via WP E-Commerce and install a different lightbox plugin?
Hi Simon,
I just realized that I didn’t save the added code to the functions.php file when I updated with your code. I reviewed and found my mistake, but am now realizing this solution wasn’t exactly what I was looking for. I don’t want both thumbnails to display. Rather, I only want 1 thumbnail to display and then when the thumbnail is clicked on, both images are available for viewing (image 1 of 2 and 2 of 2in the gallery)
As it stands now, both thumbnails show and each thumbnail (when clicked) shows image 1 of 1 in it’s gallery.
Can you help me with this?
What is the error message generated? That sounds like it might just be a typo in your code.
Hi Simon,
I’m trying to do the same thing as Caitlin in #26 but I get a fatal error when changing the code as you suggested in #27. Can you provide any assistance? Thanks!!!
yes! thanks for your help
Woooooooooooooooooooooooooooooooooooooowy
Million Thanks man you are great I got it work
Have you flushed the theme cache via Settings > Store > Presentation?
Really, there’s only two files to edit. If this has been done correctly, it works. I’m not sure a video adds much to what’s already written.
Hi Simon
I am using wordpress 3.5.2 I replaced the code in the single wpsc-single_product.php and I add the second code to my theme function.php at the very end of it. But still not working. I already have wp lightbox plugin and still not working can you help me please?
Many many thanks in advanced
I would like to suggest you make a video tutorial to show us how it works.
Thanks
Jason
The code posted here is the PHP script necessary to display the images on the page. You could use any lightbox script with it, with multiple images. What you describe sounds like you might not have the images linked together in a gallery (for instance by linking them with a rel attribute) – but it depends on your script really. Very difficult to offer any more help without seeing the page.
Hello Simon, Thanks for this epic work around, I’m able to get all the images showing on the products page, but is there a method so that when you click on an image and the lightbox opens, you can click through to each of the images. Right now you have to close one light box and then click on a different image to open it.
Thanks
If the images are displaying then it sounds like you just need a change to your css to size the additional images appropriately.
Hi Simon, please help me out. I tried all the instructions but in vain. Here is what I find, a little extra code before the
[code removed]
what to do? when I replaced all these lines, the page is loading all the images in a column with the same size we input for the product image in the store settings. No thumbnails. But the lightbox is working fine.
Please help simon, it will be greatly appreciated.
Thank you so much for this! I was pulling my hair out trying to get the product gallery to work for a client. This saved my ass you rock 🙂
Nice work dude…
Marton
That sounds like an issue with your css rather than anything here. You should be able to resolve this by amending your style.css file.
Thank you Simon, worked a treat! But unfortunately the multiple pictures come out misaligned when clicking them for a big view.
Well, that’s a different issue to the solution described here, and will require a different approach.
hi i want to show only product title and product image for a specific category on my home page
Thanks so much Simon, I thought this was going to be really hard!
I have purchased Gold Cart and needed to show 2 large images as well as all the thumbs. You code was easily modified to achieve this.
Awesome post!
This was very helpful, thank you.
Hi,
This is very important code.Thank you so much for nice script.
Incredible. Thank you so much. Your script here enabled the exact functionality I’ve been trying to achieve with a recent e-commerce project. Much obliged.
Hi Simon, This is actually what i want! Thank you so much! =D Keep up the good work!
Chris
Your code’s been scrambled by WordPress I’m afraid. Send it via the contact page if you want.
It won’t be a conflict with javascript (assuming you mean javascript not java).
Why is it that when i change the function code to this it does not work?
[code deleted]
maybe it conflict a java code?
any help appreciated!
This doesn’t happen with the twentyeleven theme if you just edit
wpsc-single_product.php. If you’ve edited other files, or if you’re using a custom theme that employs different templates then that may be the cause.Do you have any idea to fix this? http://www.txture.asia/exposition/shop/. I want my multiple image showing up only on the single product page not on the products page too.
ah yes, turns out i was viewing the product category page. can still only get two images in the list, but will work on it – thanks 🙂
You should have a ‘Manage Images’ option under the product admin page.
hi simon – nice workaround, though i can’t get it to work and might be doing [or not doing] something silly. i’m using the theme twentytwelve, but can only get the one image up
how do i add the extra images? simply by adding them to the post? or adding them elsewhere on the page options?
Rami
Sounds like you haven’t got the identifiers correct for whatever gallery application you’re using. My code includes rel attributes for lightbox, but if you’re using a different gallery script you’ll need to change to suit your own installation.
Hi Simon,
Thank you for sharing that great work.
I have added the code lines in function.php and replaced the code in single product page.
Now I am seeing all the related images are appeared as expected on my product page, but when I click on any of them in order to zoom in, i will get JS error and the zoom in spinner keeps loading forever.
do you have any advise to resolve this issue?
Thanks,
Rami
Simon –> You’re da man!!
Andrew
You should be able to do this by amending the function as follows:
function sb_get_images_for_product($id){ global $wpdb; $post_thumbnail = get_post_thumbnail_id();//read the thumbnail id $attachments = $wpdb->get_results($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE post_parent = $id AND post_type = 'attachment' ORDER BY menu_order ASC",$id)); foreach ($attachments as $attachment){ if ($attachment->ID <> $post_thumbnail){//if we haven't already got the attachment as the post thumbnail $image_attributes = wp_get_attachment_image_src($attachment->ID,'thumbnail');//get the thumbnail $medium_image = wp_get_attachment_image_src($attachment->ID,'medium'); //get the medium image?> <a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" href="<?php echo $medium_image[0]; ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>"> <img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo wpsc_the_product_title(); ?>"/> </a> <?php } } }Hi Simon. Thanks for your awesome post btw. I am having an issue with your function sb_get_images_for_product. If I’m reading this correctly, it is pulling the GUID link from the database entry for the image post. I need the lightbox to pull a medium or large image, NOT the full size image the customer uploaded. Is that possible? Your help would be greatly appreciated.
Thank you!! You saved my day!
Are you sure you’ve edited wpsc-single_product.php? If so, hard to make any other suggestion without seeing your page. I’m not sure what you mean by “not more aprece in single_product”.
Hi Simon,
Didn’t work for me, when I insert the image it appears on the page of all products, not more aprece in single_product. Any solution?
Just wanted to drop by and say thanks to the author of this tweak – just tested with d5businessline theme and works like a charm! After that someone may need to tweak the CSS in order to get the presentation style one needs. Be careful, if you have previously moved the template files (actually the wpsc-single_product.php) via the “Store Settings –> Presentation” tab, to edit the correct wpsc-single_product.php, i.e. the one found now in your *theme* directory, not in the plugin directory any more. Thanks again!
This is perfect! Works great. Thank you for your help good man!
John
My response on #20 may have been slightly confusing (now corrected). You need to amend your code from:
to:
Thank you very much, this is great help, really appreciate it! But a small question – I would like to do the same as in comment #19 but not really sure what to do in #20… could you please explain more? Getting error after deleting the mentioned code. Thanks again! Johnny
OK, I’m not familiar with that theme, but it’ll no doubt use its own version of wpsc_single-product.php. That’s the file you need to edit. If that is the case then I’m struggling to offer any further suggestions without seeing the code.
Wow, that was quick! Thanks. The theme being used in conjunction with WP eCommerce is eStore
Barrie
I don’t think so. Following a query from another user I tried the latest version of WP eCommerce with the tweak at the weekend and had no problem (turned out he’d been editing the wrong file).
Are you using a different theme? I tested with twentyeleven.
I’ve got the same issue as Eric. Followed the process to the letter to add the code, in the correct files and position with single product file, flushed the cache from the presentation tab, went to a product, clicked on manage product images, could only add one image as a thumbnail. Not only that, the single product page displayed the header and title and nothing else. After removing your code, normal display was restored. I’m definitely using the wpsc-single_product.php and functions.php files. Any idea what might be causing this? Have the plugin developers seen this work around and changed the theme to over come it?
Eric
I’m guessing that the theme you’re using has its own version of code for the product page, and doesn’t use wpsc-single_product. You need to identify the file that the theme is using, and make the changes to that file.
Hi Simon,
I’ve replaced the code in the wpsc-single_product.php file with your code and added the function within my theme’s function file and also flushed the wp-ecommerce cache. Still, only one thumbnail is showing up. I am using the lastest kassyopea theme and wp e-commerce version 3.8.8.5
Sohag
OK, let’s assume you’ve got jQuery loaded on your page, your large image has an id of
largeimgand your thumbnails are in a div with id ofthumbnails. Let’s also assume that the image used for the thumbnails is actually a large enough image to be used for the large image on the page (even though it’s displayed smaller). Then all you need is:<script type="text/javascript"> jQuery('#thumbnails img').click(function(){ jQuery('#largeimg').attr('src',$(this).attr('src')); });</script>This replaces the src attribute of the large image with the src attribute of the clicked image. You can add effects if you need, this’ll just swap the image out.
Hi,
Thanks for the code. You can’t imagine how much it helped me. I want to get what exactly sandy wanted. I am a novice so can you gide me. I have put the larger image using the actual code of wpsc in a div before the description. and put the thumbnails in another div after the description. The lager image in left of the description and thumbnails in right of the description. Can suggest how could I get the effect that sandy wanted. It will also be nice of you if you mention any javascript code or any reference.
Thanks
Don
Depending on what image slider you’re using, it’s probably just selecting all images on the page. To get it to just select the ones you want, you could edit the template to give a class to each of the actual product images, and then add this selector to the javascript that runs the slider.
Hi, Simon! Awesome post. I used it and works nice. One question tho. If I use other images in the product information, like showing a Size Chart or something, that also gets displayed in my Product Image Slider. How would I exclude those?
Yes, you’d just need to add multiple images as described, setting the size of the additional images to the same as the main image. Obviously, you’d need a slightly different javascript to achieve that effect.
Hey !
is it possible to add number of images on the front image ?
something like that:
http://brw.com.pl/pl/produkt/13308-KOM4D%2F100/8-Pok%C3%B3j+dzienny
Sandy
If you mean just replace the larger image when a smaller image is clicked, rather than using a lightbox, then the PHP isn’t affected, obviously.
You just need to write a bit of javascript that replaces the src attribute on your large image to the src attribute from the clicked image.
Hi,
Great post, I just want to set multiple images of product like this http://www.mind-projects.it/projects/jqzoom/demos.php#demo1 default image if bigger and other images smaller (thumb). If i click on any thumb image it will replace with bigger image.
How to do? thanks
Hi Tim
Thanks. Yes, the code is in a single block in
wpsc-single_product.php, starting at line 31 in version 3.8.8.5. I can’t help too much with your functions.php – if you copy the code right at the bottom of the file that should avoid affecting anything else in that file.Many thanks for the solution Simon. I apologize for the long comment.
I can see that this is totally working, but I guess I’m more of a newb than I thought.
When viewing ‘wpsc-single_product.php’ in notepad++ I can’t even find the full block of code in the first box above that you indicated needed to be replaced.
I am able to find separated fragments of the code, but I am just confused by this.
Is this code one contiguous block as illustrated above?
Also, I followed your instructions to Bear and copied the ‘functions’ code to the top of the ‘functions.php’ file, just after the ‘INITIATE JQUERY / STYLING’ comment, and nothing on my site worked until I restored the original ‘functions.php’ file.
One great additional benefit to me was your response to Farhad indicating that “WP doesn’t resize already loaded images…”. D*?{!!!
In the ‘Thumbnail Settings’ section of the ‘Presentation’ tab of the ‘Store settings’ it CLEARLY STATES that “…WPeC will automatically resize ALL of your thumbnails for you” when you update any of the settings. Man, I spent HOURS trying to figure out why my Product Page thumbs wouldn’t update.
You’re the best Simon. Thanks for taking the time man. Your generosity is really appreciated.
Bear
The code can go anywhere in functions.php – top ot bottom is fine.
Deb
Linking the images to an external page isn’t supported by WP e-Commerce. This would be relatively complex to add to the WP e-Commerce functionality as it would need additional database fields as well. Not certain from your question however whether you’re actually trying to do this with WP e-Commerce – it’s simple to use WP to link images to an external page.
when I put the code in functions.php in my theme folder, it gives me error. where’s the right place to put it ?, top of the functions code ?, or in the bottom. as I see it has opened
Im using WP 3.4.1, WPEC 3.8.8.5
Here is something I would like to do–I’m not a techie and I dont know code-speak so be patient….
I have images on Pinterest that are actually image ads. Unfortunately some of the affiliate and hoplinks are banned from there so I’m having them sent to one of my websites–I’m using the one above for ads where I don’t have a specific themed website– I would like to create a gallery (or a page) in my site that has the same images. Except this time the image is linked to the sales page of the product. Many of the things I plan to sell for Plimas dont provide banners and such–so rather than just list the products on my pages–I want to bring them from Pinterest to the gallery, and link the Same image to the sales page.–and them have a back link back to my site. I appreciate the help.
Mate thank you so much!!! :))) Great work!
GREAT!! thanks
You need to edit the file
wpsc-single_product.php– save a copy in your theme folder and make sure you’ve flushed the theme cache via Settings > Store > Presentation.Hi. Iam using the wp-ecommerce 3.8.7.6.2 .And i am unable to find the first add the multiple images form the backend.How can i do that.Any help would be much appreciated.
Thanks
Hi Waqas
To do this my inclination would be to leave the html as it is, and just hide the additional images using css, and pick them up with whatver lightbox script you’re using. This avoids the lightbox script having to find the extra images, as they’re already on the page, albeit not visible.
Awesome job brother……
Thanks alot
One question i have four images i just want to show first image in thumbnail and when click on first image then a light box where all four images are available to click and see. How i just show first image as thumbnail.
Wow! after trying several solutions to fix this problem, yours was the only one that worked for the latest versions of WP and WPSC.
A BIG Thank YOU!
Farhad
WordPress doesn’t resize already loaded images when you change the thumbnail size via the Media settings – you may need to do this manually, or there are plugins that will do this for you. Sounds like this might be the problem here – if you try with a newly uploaded image that should work OK.
Hi Simon,
Great it’s working for me. Thank you. I just made the featured image lager with the code that you suggested for Tiffany. I just want to make the other images smaller. I adjust the media settings of wordpress for the thumbnail image, but nothing changed. Can you please help me
Hi Catalin
You should just be able to replace this code (around line 88 of wpsc-products_page.php):
with this
<?php endif; ?> <?php sb_get_images_for_product(wpsc_the_product_id());//...and then display all the rest of the images ?>This code is working for product details page, but what should I do in order to work also when products are listing in a category?
Thanks
This code displays all images as thumbnails, but it would be simple enough to include a large image as well.
thanks for this post! would you be able to provide a demo? How are the images displayed under individual product page? Are there thumbnails only? or do we have a big image with thumbnails underneath like we see it on some websites?
Hi Tiffany
Yes, this is straightforward – you just need to set the image size in
get_the_post_thumbnail:<?php echo get_the_post_thumbnail(wpsc_the_product_id(),'large',array('alt' => wpsc_the_product_title(),'title' => wpsc_the_product_title() ));?>I think that’s what you mean….
hi simon,
thanks so much for this! I’ve been looking for this without having to pay for the goldcart. Is there a way to keep the featured image large and the other images smaller as thumbnails?
Excellent workaround. Exactly what I was planning to do. Like hell am I paying to get access to basic WordPress functionality. Cheers man!
Mark
In that case you should just be able to remove the code to display the thumbnail:
Wow, thanks Simon! This is almost exactly what I needed!
How would I edit this to ignore displaying the thumbnail image altogether, and just display the remaining images in the media library? I’m hoping to use thumbnails on my products page, and medium-sized images for the single product pages.
Hi Emiliano
I think you’re asking about using images already in the Media Library to add to a new product? I agree, WP e-Commerce doesn’t seem to allow this since WP 3.3.1.
I did this a while ago without the gold cart too. One question remains is, how to use already attached images to others products?. WPeCommerce doesn’t bring any hook to allow this in the media gallery or in the product edit page.
Thank you very much. You saved my day
Thank you! You’re awesome for sharing this bit of wisdom!!! Took me a few tries, but I did it. Kiss kiss..
The function needs to go in your theme’s functions.php, not in style.css.
The function that I posted assumes that one image is set as the product thumbnail, and applies a class of “hidden” to the remaining images. You can then use this class to hide the images via your style.css. This will result in only one image displaying on the page, but the remaining images are included, but hidden. Depending on the lightbox script you are using, all images can be displayed in the lightbox.
hi,
Where must i input the sb_get_images_for_product() ? i imported in my styles.css nothing changed.
thank you
Marijn
Yes, my function as posted includes thumbnail images via this line:
$image_attributes = wp_get_attachment_image_src($attachment->ID,'thumbnail');Replace
thumbnailwith any ofmedium,largeorfullto use a different size. See the WP documentation forwp_get_attachement_image-srcfor more info.Hi Simon,
Thanks heaps for this! Is there a way though to display full size images instead of the small 150x150px thumbnails?
thanks again!
Hi Farhad
The easiest way to do this might be to leave the code that displays the extra images on the page but hide them via css – which you could do by amending the
sb_get_images_for_product()function by simply assigning a different class to the extra images – those that are not the thumbnail. Like this:function sb_get_images_for_product($id){ global $wpdb; $post_thumbnail = get_post_thumbnail_id();//read the thumbnail id $attachments = $wpdb->get_results($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE post_parent = $id AND post_type = 'attachment' ORDER BY menu_order ASC")); foreach ($attachments as $attachment){ if ($attachment->ID <> $post_thumbnail){//if we haven't already got the attachment as the post thumbnail $image_attributes = wp_get_attachment_image_src($attachment->ID,'thumbnail');?> <a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" href="<?php echo $attachment->guid; ?>" class="hidden <?php echo wpsc_the_product_image_link_classes(); ?>"> <img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo wpsc_the_product_title(); ?>"/> </a> <?php } } }This would mean the images are there but not displayed. Displaying them on click then depends on the plugin you’re using. Lightbox Plus will automatically find the elements created and display them.
hi Simon,
Thank you you are a life saver. i was looking for this solution and i found it. i replaced the code and added the other code in the function.php but on the product page it display all the images is there a way to display just 1 image and if you click on it and display the rest.
thank you for your help.
If there’s only one image then you should be able to use the standard code unchanged. WP e-Commerce has a built in function which displays the product image using the height and width set for the Store which is
wpsc_the_product_thumbnail().Hello if there is only one image to a post which part do you change to set it to default size? Thanks for the help..
You just need to remove the rel attribute which is used by lightbox and instead, add an additional class for your plugin to use. The php code I’ve posted just displays the images – what javascript you use on them after that doesn’t matter.
Hello can i integrate this zoom
http://www.mind-projects.it/projects/jqzoom/index.php#howtouse
on you multiple images how can i remove the light box?
Awesome !
Thank you so much 😀
Great Sharing
Yes, that’s right.
Hi where did you put the function?is it the functions.php of the theme?TIA