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

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

HIT

18.06.2017

6090

1

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

Тэги: ,

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

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

Выводим записи у которых нет миниатюры

Иногда нужно вывести все записи в которых отсутствуют миниатюры. Например, для интернет-магазина с множеством товаров. Сделаем это! Создаем страницу вывода Создадим шаблон страницы none-img.php, вначале обязательно прописываем название шаблона: <?php Читать далее »

Фотогалерея (NextGEN Gallery)

Фотогалерея (NextGEN Gallery)

Часто на различных сайтах требуется организовать галерею изображений. Сделать это можно различными плагинами, либо штатными средствами. Штатные методы формирования галереи с каждой версией совершенствуются. Стандартная галерея wordpress Галерея в виде Читать далее »

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

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

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

/

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

1 комментарий

  1. Аватар
    Илья

    Еще 2 вопроса хочу Вам задать:
    1) Использую сейчас предложенный вариант, где добавляется одна первая картинка галереи. При наведении на картинку, у дополнительной появляется свойство opacity:1 и это замечательно. Но первая картинка по-прежнему остается видимой и, если дополнительная картинка меньшего размера, то выглядит несуразно. Пробовал добавлять свойство (product:hover .woocommerce ul.products li.product a img {opacity:0!important;}), но это не помогает. Подскажите, как решить данную проблему.
    2) Интересует вариант, когда можно добавить не только одну картинку и не все, а определенное количество, например 5. Как в таком случае будет выглядеть код?
    Огромное спасибо заранее!

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