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

Question

在WooCommerce单一产品页面上，图库缩略图显示在主要特色图像下方。我们有一个问题，我们通常包括30个图像，因此显示的缩略图数量变得非常长，并在页面上创建大量空白（见下图）。

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

我看了一下WooCommerce钩子参考，但没有看到这样做的选项。

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