Галерея изображений товара в категории

Создадим переключающиеся изображения товара при наведении мыши, либо галерею изображений товара в шаблоне категории.
Под галереей изображений (Featured Images) понимаются дополнительные изображения помимо основного изображения.

Выводим дополнительные изображения

function woocommerce_feature_gallery() {

global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
  
foreach( $attachment_ids as $attachment_id ) {
  echo wp_get_attachment_image( $attachment_id, 'shop_catalog' );
}

}

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_feature_gallery', 8 );

Варианты вывода изображений

  //Получить URL изображений галереи - размер изображений WordPress по умолчанию
  echo $Original_image_url = wp_get_attachment_url( $attachment_id );
  echo $full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0];
  echo $medium_url = wp_get_attachment_image_src( $attachment_id, 'medium' )[0];
  echo $thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];
  
  //Получить URL изображений галереи - размеры изображений WooCommerce
  echo $shop_thumbnail_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_thumbnail' )[0];
  echo $shop_catalog_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_catalog' )[0];
  echo $shop_single_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_single' )[0];
  
  //Вывести сразу изображение
  echo wp_get_attachment_image($attachment_id, 'full');
  echo wp_get_attachment_image($attachment_id, 'medium');
  echo wp_get_attachment_image($attachment_id, 'thumbnail');
  echo wp_get_attachment_image($attachment_id, 'shop_thumbnail');
  echo wp_get_attachment_image($attachment_id, 'shop_catalog');
  echo wp_get_attachment_image($attachment_id, 'shop_single');

Переключение двух изображений

Вывести только первое изображение галереи

function woocommerce_feature_gallery() {

global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
  
echo wp_get_attachment_image( $attachment_ids[0], 'shop_catalog' );

}

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_feature_gallery', 8 );

Либо ссылкой, с возможностью добавления произвольного класса — dop-image. Также сделана проверка на наличие дополнительного изображения.

function woocommerce_feature_gallery() {

global $product;
$attachment_ids = $product->get_gallery_attachment_ids();

if (!empty($attachment_ids)) {  
echo '<img class="dop-image" src="'.wp_get_attachment_image_src( $attachment_ids[0], 'shop_catalog' )[0].'">';
}

}

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_feature_gallery', 8 );

Эффект переключения при наведении будет достигаться чистым CSS

.dop-image {
    display: none;
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    left: 0;
    top: 0;  
}

.product:hover .dop-image {display: block;}

Более плавного эффекта можно добиться используя свойство opacity, но в этом случае не должна быть задействована техника плавного появления изображений.

Решено! Можно применять и при использовании плавного появления элементов:

.dop-image {
    opacity: 0 !important;
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    left: 0;
    top: 0;  
}

.product:hover .dop-image {opacity: 1 !important;}

Создаем галерею из изображений

Непосредственно галерея всех изображений вряд ли пригодится в большинстве случаев. Но мы можем это реализовать.

Создаем новую функцию создания галереи, которая будет совмещать в себе основное изображение и дополнительные (Featured Images).

//Галерея изображений в архиве
function woocommerce_feature_gallery() {

global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
  
  echo '<div class="feature-slider">';
  
  echo '<div>';
  echo get_the_post_thumbnail( $post->ID, 'shop_single', $attributes );
  echo '</div>';
  
foreach( $attachment_ids as $attachment_id ) {
  echo '<div>';
  echo wp_get_attachment_image( $attachment_id, 'shop_catalog' );
  echo '</div>';  
}
  echo '</div>';

}

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 ); //Убираем вывод одиночного изображения
add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_feature_gallery', 8 );

Теперь вдохнем жизнь нашей галереи. Я буду это делать с помощью скрипта slick. Инициализируем слайдер:

$(document).ready(function() {
$('.feature-slider').slick();
});

Некоторые стили, возможно пригодяться

/* Для галереи изображений товара */

.feature-slider .slick-list {margin: 0 !important;}

.feature-slider .slick-arrow {
	opacity: 0;
	transition: all 0.3s ease;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s ease 0s;
}

.feature-slider:hover .slick-arrow {opacity: 1;}

.feature-slider:hover .slick-prev {left: 0; z-index: 9;}
.feature-slider:hover .slick-next {right: 0;}

.feature-slider .slick-prev:before, .feature-slider .slick-next:before {color: #fff;}

Далее можно прикручивать любые настройки из арсенала slick: стрелки управления, автопрокрутка и т.д.

Это можно легко исправить мини скриптом, запрещающим переход по ссылке:

$(".slick-arrow").click(function(){ return false; });

Галерея изображений товара в архивах с помощью плагинов

WooCommerce Product Image Flipper (4000) — делает переключение изображения при наведении.

WooCommerce Product Archive Image Slider — выводит у товара всю галерею изображений. Плагин требует серьезной переработки (не обновлялся более 3-х лет): у товаров с одним изображением исчезает кнопка Купить. Кнопки Вперед и Назад находятся в самом низу.

Shop Product Images Slider — платное решение (5$). Настраивается направление перелистывания, скорость автопромотки.

Поделиться в соц. сетях: