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