Как добавить новую галерею WooCommerce 2.7 в вашу тему
Вы, наверное, уже знаете, что в WooCommerce 2.7 полностью переделали галерею товара, сделали ее адаптивной. Давайте покажу, как ее интегрировать в любую вашу тему.
Программисты постарались на славу и запилили новую фичу, которую условно можно разделить на три отдельные новые функции:
- Image zoom / magnification
- Lightbox
- Slider
Для включения каждой из них дополните functions.php
в вашей теме хуком after_setup_theme
со следующим сожержимым:
add_action( 'after_setup_theme', 'yourtheme_setup' ); function yourtheme_setup() { // Включить zoom на фото add_theme_support( 'wc-product-gallery-zoom' ); // Включить лайтбокс add_theme_support( 'wc-product-gallery-lightbox' ); // Включить слайдер add_theme_support( 'wc-product-gallery-slider' ); }
Таким образом, можно включать/выключать только нужный вам функционал.
Стилизация
Если в вашей теме отключены стили ядра WooCommerce, то придется ручками прописать их в соответствии со следующим списком:
.woocommerce-product-gallery
– класс обёртки галереи. Также включает в себя класс, показывающий, сколько колонок с миниатюрами будет показано, например,.woocommerce-product-gallery--columns-4
;.woocommerce-product-gallery__wrapper
– обёртка для слайдера;.woocommerce-product-gallery__image
– элементfigure
, содержащий само изображение, которое обернуто в ссылку;.woocommerce-product-gallery__trigger
– ссылка, активирующая функциональность лайтбокса;.flex-control-thumbs
– класс, который присваивается тегуol
при включении функций слайдера на основе скриптаFlexslider
.
При изменении количества колонок миниатюр через фильтр woocommerce_product_thumbnails_columns
вам также придется дописать соответствующие правила в ваш файл со стилями.
Если интересно, то можно посмотреть, какой SASS используется в теме Storefront для стилизации галереи продукта.
Для изменения шаблонов вывода галереи продукта скопируйте и вставьте себе в тему следующие файлы: templates/single-product/product-image.php
и templates/single-product/product-thumbnails.php
.
И будьте внимательны, если данные шаблоны у вас уже переопределены, возьмите их снова из папки WooCommerce, так как для полноценной работы в них добавили новые скрипты и немного css. Без этого галерея просто может не заработать.
Живой пример

Михаил, здравствуйте! Очень рад читать ваш блог. Всегда нахожу много полезной информации.
Вам не встречалась такая задача на странице товара в woo >5 сделать вместо слайдер скролл? Есть ли такой хук, если как как его найти?
п.с. Вместо миниатюр все полные изображения скролятся одной колонкой
А хуки из статьи не работают?