Woocommerce产品单面缩略图默认是一行4个,如果更多的图片的情况下,就需要修改代码来实现了。
在主题下的functions.php文件中添加以下代码:
/* Change No. of Thumbnails per Row @ Product Gallery | WooCommerce */
add_filter( 'woocommerce_single_product_image_gallery_classes', 'bbloomer_5_columns_product_gallery' );
function bbloomer_5_columns_product_gallery( $wrapper_classes ) {
$columns = 8; // 默认是4,修改自己想要的数量即可.
$wrapper_classes[2] = 'woocommerce-product-gallery--columns-' . absint( $columns );
return $wrapper_classes;
}
再配合CSS调整略缩图大小即可
.woocommerce div.product div.images .flex-control-thumbs li {
width: 50px;
}