Home » WooCommerce: Move Product Gallery Thumbnails

WooCommerce: Move Product Gallery Thumbnails

by Tutor Aspire

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

You may also like