Today we take a look at the WooCommerce Single Product Page and specifically at how to move the image gallery from under the main image to somewhere else, for example in the short description. Enjoy!
PHP Snippet: Move Product Gallery Thumbnails on the Single Product Page
/**
* @snippet Move Product Gallery Thumbs
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=19864
* @author Rodolfo Melogli
* @testedwith WooCommerce 3.4.5
*/
// #1 remove images from under featured image
remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
// #2 add them back under short description
// note: this will need a bit of CSS customization - see below
add_action( 'woocommerce_single_product_summary', 'bbloomer_product_thumbnails_wrapper_start', 49 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_show_product_thumbnails', 50 );
add_action( 'woocommerce_single_product_summary', 'bbloomer_product_thumbnails_wrapper_end', 51 );
function bbloomer_product_thumbnails_wrapper_start() {
echo '<div class="bbloomer-thumbs">';
}
function bbloomer_product_thumbnails_wrapper_end() {
echo '</div>';
}
And a bit of CSS…
.bbloomer-thumbs div.woocommerce-product-gallery__image {
width: 30%;
margin-right: 3%;
margin-bottom: 3%;
float: left;
}
Hi
Thanks for great snippet.
I place this code into my function file. And Thumbnail change their position.
The issue is that thumbnail loose the relation with slider. When click on the thumbnail its opening it self in browser.
I tried this snippet in my custom theme and in Twenty Twenty theme.
Please suggest me solution.
Thanks
Yes I guess you also need to add custom JS on top of that. Or disable zoom/gallery completely
Hi Rodolfo!
Nice tutorial as always! Could you tell us what JS to put? I have the same issue described by OP here.
Thanks in advance!
Hi Carlo, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Rodolfo,
I’m working on a self improvement/travel site that requires the user to book their choice of cabin, tent, etc. The theme I’m using (X-trail Outdoor theme) changes the format of the product (in this case accommodation) thumbnail images to display to the side of the main image, which is different from the default (images below the main image). I’d like the product to have the default format (thumbnails below the main image) instead of the way the theme formats it.
So my question is there a way to overwrite the theme formatting of the product images to display the default formatting? I’ve reached out to the theme authors, but they said they don’t have time to help me with a solution. Any help here would be greatly appreciated.
Hi Brandon, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello! Very helpful. I was able to move the gallery thumbnails using “woocommerce_before_single_product” instead, however it seems to have lost all functionality. As in, i cannot click the thumbnails at all which makes then unable to load into the bigger single product image space.
Any idea what would cause that? Maybe moving them into that particular spot has something to do with it.
It could be, Dave. There is also some jQuery that allows the product gallery to open in a lightbox – you’ll possibly need more than just PHP
Worked for me. Thank you! Life-saver.
Awesome!
Hi
Snippet already moved the product thumbnails/image gallery under short description but when I click a certain image in product thumbnail/image gallery under short description it does not change the main image but only shows a lightbox.
So, I need to change the main image image when I click an image in the image gallery under short description?
Thank You
Hello Page, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
This code removes the lightbox capabilities of my gallery. Can you comment?
Hey Prokops, thanks for your comment! Does this happen if you use another theme as well?
Thank you for this, but it seems that the code needs to revised again for the new version of Woo. The images gallery is big again.
Red, thanks for your comment! I just tested this again with Storefront theme and it works perfectly. Maybe your theme requires custom CSS?
Red, thanks for your comment! I just tested this again with Storefront theme and it works perfectly. Maybe your theme requires custom CSS?
– Thank you for your reply. I’m using Divi theme and used a custom CSS.
Its working now, but the light box and sliders doesn’t work anymore.
Uhn, I guess this is Divi-specific. Sorry 🙂
Hello,
your code worked perfectly for me until the upgrade which included the new gallery. The images are now large and stacked on top of each other. Plus they are the same “item” as the main picture (it doesn’t show up as a thumbnail) so you can’t change the css of the thumbnails without affecting the main picture too. I saw other people had this problem but no solutions yet… thank you for your snippets!
Thanks Keri! Yes, when I update to Woo 3.0 I will revise the snippet – I put this on the list now 🙂 Cheers!
I have the same problem with Keri.
Seems like a WordPress bug!
I too, have the same problem. Does it have workaround now?
Same problem here too, is there a fix yet?
All – snippet has now been updated for Woo 3.2.3 🙂
HI,
Thanks for the awesome snippet.i wonder is there any way to move the gallery image to vertical alignment to the left side of the single product image.Any ideas?
Hey, thanks for your comment! Try with: https://businessbloomer.com/woocommerce-display-product-gallery-vertically-single-product/