WooCommerce: Move Product Gallery Thumbnails

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!

WooCommerce: Move the Product Gallery
WooCommerce: Move the Product Gallery

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;
}

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (delete "?>" if you have it there). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.3.

If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

27 thoughts on “WooCommerce: Move Product Gallery Thumbnails

  1. 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

    1. Yes I guess you also need to add custom JS on top of that. Or disable zoom/gallery completely

      1. 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!

        1. 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!

  2. 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.

    1. 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!

  3. 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.

    1. 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

  4. Worked for me. Thank you! Life-saver.

    1. Awesome!

  5. 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

    1. 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!

  6. This code removes the lightbox capabilities of my gallery. Can you comment?

    1. Hey Prokops, thanks for your comment! Does this happen if you use another theme as well?

  7. 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.

    1. Red, thanks for your comment! I just tested this again with Storefront theme and it works perfectly. Maybe your theme requires custom CSS?

    2. 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.

    3. Its working now, but the light box and sliders doesn’t work anymore.

      1. Uhn, I guess this is Divi-specific. Sorry ๐Ÿ™‚

  8. 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!

    1. Thanks Keri! Yes, when I update to Woo 3.0 I will revise the snippet – I put this on the list now ๐Ÿ™‚ Cheers!

    2. I have the same problem with Keri.
      Seems like a WordPress bug!

    3. I too, have the same problem. Does it have workaround now?

    4. Same problem here too, is there a fix yet?

      1. All – snippet has now been updated for Woo 3.2.3 ๐Ÿ™‚

  9. 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?

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Your email address will not be published. Required fields are marked *