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!

PHP Snippet: Move Product Gallery Thumbnails on the Single Product Page

/**
 * @snippet       Move Product Gallery Thumbs
 * @how-to        Get tutoraspire.com FREE
 * @sourcecode    https://tutoraspire.com/?p=19864
 * @author        Tutor Aspire
 * @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', 'tutoraspire_product_thumbnails_wrapper_start', 49 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_show_product_thumbnails', 50 );
add_action( 'woocommerce_single_product_summary', 'tutoraspire_product_thumbnails_wrapper_end', 51 );

function tutoraspire_product_thumbnails_wrapper_start() {
echo '
';
}

function tutoraspire_product_thumbnails_wrapper_end() {
echo '
';
}

And a bit of CSS…

.bbloomer-thumbs div.woocommerce-product-gallery__image {
width: 30%;
margin-right: 3%;
margin-bottom: 3%;
float: left;
}