WooCommerce：移动产品库缩略图

今天，我们看一下WooCommerce单一产品页面，尤其是如何将图库从主图像下方移动到其他位置，例如简短说明。

// #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>';
}

还有一点CSS …

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