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 (before "?>" if you have it). 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+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials. You can start learning how to customize WooCommerce without unnecessary plugins. Watch me code and learn by example!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a 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.

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


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

  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: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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