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