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        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @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!

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

19 thoughts on “WooCommerce: Move Product Gallery Thumbnails

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

    1. Awesome!

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

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

  4. 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 ๐Ÿ™‚

  5. 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 ๐Ÿ™‚

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.