Woocommerce修改产品页面缩略图每行数量

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;
}
评分 post
奥博说 版权所有丨如未注明 均为原创
转载请注明:https://www.oppblog.com/archives/491

发表评论