/ Сайтостроение / Плагины / Галерея изображений товара в категории

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

HIT

18.06.2017

2746

2

Создадим переключающиеся изображения товара при наведении мыши, либо галерею изображений товара в шаблоне категории.
Под галереей изображений (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 );

С версии WC 3.0 нужно заменить get_gallery_attachment_ids на get_gallery_image_ids

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

  //Получить 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$). Настраивается направление перелистывания, скорость автопромотки.

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Миниатюры меток

Миниатюры меток

Произвольными полями делаем поле «миниатюра (изображение)» в метках. Там где надо вывести миниатюру ставим <?php // номер метки $tag_id = get_query_var( 'tag_id' ); // данные о текущей категории $tag = Читать далее »

/
Выравнивание миниатюр товаров

Выравнивание миниатюр товаров

Идеальная ситуация, когда мы загружаем изображения для товаров (хотя бы для главного изображения) квадратными. т.е. заранее подготовленными, откадрированными. Но бывают случаи, когда на сайт начинают заливаться изображения разных пропорций. Сделаем Читать далее »

/
Миниатюра — фон сайта

Миниатюра — фон сайта

Мы можем использовать миниатюру записи для самых разных целей. В данной статье рассмотрим вариант использовать миниатюру в виде фонового изображения сайта. Вывод миниатюры в виде фона В цикл вывода миниатюры Читать далее »

/

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

2 комментария

  1. Product picture gallery on woocommerce category page - v.chuy

    […] gallery made on Slick. Part of the code is peeped here So, the code […]

  2. Галерея изображений товара на странице категории woocommerce - v.chuy

    […] выполнена на Slick. Часть кода подсмотрена тут Итак, […]

Галерея изображений товара в категории
Metabox woocommerce
Рекомендации для васMetabox woocommerceOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.