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

Share:

Leave a Reply