限制WooCommerce单一产品页面上显示的缩略图数量

Question

在WooCommerce Single Product页面上，图库缩略图显示在主要特色图像下方。我们遇到的问题是，我们经常包含30多张图片，因此显示的缩略图数量变得非常长，并在页面上创建了大量的空白区域（见下图）。

所以，我正在寻找一个钩子或黑客（CSS？），这将允许我将可见缩略图的数量限制为6或9，但在Lightbox启动时将全部包括在内。

我查看了WooCommerce Hook Reference，但看不到这样做的选项。

Answer 1

使用CSS有一种简单的方法可以做到这一点。而不是试图限制循环中输出的缩略图的数量，您可以在主题的styles.css文件中使用类似的CSS将图像隐藏在页面上的某个点下方：

body.single-product div.images div.thumbnails {
    max-height: 380px;
    overflow: hidden;
/* Optional - create a gradient fade at bottom for webkit browsers */
    -webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}