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

Живой пример

Ссылки

Источник: https://www.kobzarev.com/wordpress/adding-support-for-woocommerce-2-7s-new-gallery-feature-to-your-theme/

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

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: