Как изменить параметры галереи изображений товара?

В админке WooCommerce есть встроенный функционал галереи товаров:

Метабокс галереи товара в WooCommerce
То есть под метабоксом «Изображение товара» у нас есть возможность выбрать ещё какие-то фото для галереи.

Что же происходит дальше?

  • На странице товара вы можете использовать стандартный функционал галереи WooCommerce, он работает на основе Flexslider, который вроде как разработали сами ребята из Woo, для его включения не забудьте add_theme_support( 'wc-product-gallery-slider' ).
  • Вы можете использовать какой-то собственный слайдер галереи, да и вообще выводить её, как вам захочется, один из таких примеров мы разбирался в видеокурсе.

Например та галерея, на основе которой я готовил этот урок, на странице товара выглядела вот так:

Галерея изображений товара в WooCommerce на основе Flexslider
Встроенная галерея изображений товаров в WooCommerce

И от меня требовалось привнести в неё несколько модификаций: добавить стрелки, сделать чтобы они листали бесконечно и т.д.

Как добавить стрелки в галерею товаров WooCommerce?

Вообще небольшой спойлер – по сути всё, что мы будем делать в этом уроке, работает на основе одного-единственного фильтраwoocommerce_single_product_carousel_options, который позволяет изменить стандартные параметры галереи.

add_filter( 'woocommerce_single_product_carousel_options', 'truemisha_product_gallery_arrows' );
 
function truemisha_product_gallery_arrows( $options ) {
 
	$options[ 'directionNav' ] = true;
	return $options;
 
}

Но не спешите радоваться, после вставки этого кода в functions.php вашей или дочерней темы то, что появится, едва ли можно назвать стрелками – по сути две ссылки «Previous» и «Next». Так что вам ещё придётся самим поработать с иконками и стилизацией в CSS, а также с параметрами для изменения текста ссылок – prevText и nextText.

Другие параметры галереи

На самом деле параметров очень много, полный список вы можете найти на GutHub, ниже я перечислю только параметры, задающиеся как параметры по умолчанию внутри хука:

'flexslider' => apply_filters(
	'woocommerce_single_product_carousel_options',
	array(
		'rtl'            => is_rtl(), // направление текста
		'animation'      => 'slide', // тип анимации, fade или slide
		'smoothHeight'   => true, // автовысота, очень рекомендую так и оставить
		'directionNav'   => false, // как раз стрелки
		'controlNav'     => 'thumbnails', // false – отключить миниатюры, true - превратить в ссылки
		'slideshow'      => false, // автосмена слайдов другими словами
		'animationSpeed' => 500, // скорость основной анимации в миллисекундах
	)
),

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Оставить комментарий

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.