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

【问题标题】：Limit Number of Displayed Thumbnails on WooCommerce Single Product Page限制 WooCommerce 单个产品页面上显示的缩略图数量
【发布时间】：2015-06-25 22:42:12
【问题描述】：

在 WooCommerce 单一产品页面上，图库缩略图显示在主要特色图片下方。我们遇到的问题是，我们通常包含 30 多张图片，因此显示的缩略图数量会变得很长，并在页面上产生大量空白（见下图）。

所以，我正在寻找一种钩子或技巧（CSS？），它可以让我将可见缩略图的数量限制为 6 个或 9 个，但在启动 Lightbox 时将它们全部包含在内。

我查看了WooCommerce Hook Reference，但没有看到执行此操作的选项。

【问题讨论】：

标签： wordpress image woocommerce

【解决方案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)));
}

【讨论】：