Как добавить новую галерею 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. Без этого галерея просто может не заработать.

Живой пример

WooCommerce 2.7 Product Gallery

Ссылки

• Adding support for WooCommerce 2.7’s new gallery feature to your theme

PHP Snippets Storefront WooCommerce WordPress