Предельное количество отображаемых эскизов на WooCommerce. Одна страница продукта

Question

На страницах с одним продуктом WooCommerce миниатюры галереи отображаются под основным изображением. У нас есть проблема в том, что мы часто включаем 30+ изображений, поэтому количество отображаемых эскизов становится очень длинным и создает большое количество пробелов на страницах (см. Изображение ниже).

Итак, я ищу крючок или хак (CSS?), Который позволит мне ограничить количество видимых миниатюр до 6 или 9, но будет включать их все при запуске Лайтбокс.

Я взглянул на WooCommerce Hook Reference, но не вижу возможности сделать это.

Answer 1

Там простой способ сделать это с помощью CSS. Вместо того, чтобы пытаться ограничить количество эскизов, которые выводятся в цикле, вы можете просто скрыть изображения ниже определенной точки на странице, используя некоторые CSS, как это, в файле styles.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))); 
}