Верх страницы
Логотип Telegram
@Злой_Полицейский — авторский канал вашего покорного слуги в Telegram, где я пишу заметки о веб-разработке, программировании, PHP, инструментах и WordPress.
Обложка к записи Как добавить новую галерею WooCommerce 2.7 в вашу тему
Время для прочтения: 0 мин. 16 сек.

Как добавить новую галерею 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 GalleryWooCommerce 2.7 Product Gallery

Ссылки

Автор: Кобзарёв Михаил

Суровый русский разработчик. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все.

Ведет блог о разработке, дайджест в телеграмме и в ВК.

Комментарии
Подписаться
Уведомить о
guest

2 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Алексей
Алексей
1 год назад

Михаил, здравствуйте! Очень рад читать ваш блог. Всегда нахожу много полезной информации.

Вам не встречалась такая задача на странице товара в woo >5 сделать вместо слайдер скролл? Есть ли такой хук, если как как его найти?

п.с. Вместо миниатюр все полные изображения скролятся одной колонкой

Предыдущая запись
Следующая запись

Михаил Кобзарёв (mihdan)

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, фильмы и сериалы