Как добавить увеличение изображения при наведении мышки в товаре Woocommerce

  Автор:
  564
Как добавить увеличение изображения при наведении мышки в товаре Woocommerce

Разработчики Woocommerce в новой версии 3.0 добавили новый инструмент «Лупа». Инструмент работает так: при наведении мышки на изображение товара изображение увеличивается. Таким образом можно просмотреть изображение товара более детально, как с помощью лупы.

Такую фишку можно наблюдать на сайтах aliexpress, amazon, ebay

Aliexpress — при наведении мышки на изображение товара, справа появляется окно с увеличенным изображением

Amazon — при наведении мышки на изображение товара, справа появляется окно с увеличенным изображением

Ebay — при наведении мышки на изображение товара, справа появляется окно с увеличенным изображением

Кто уже давно работает с Woocommerce знают, что для такого эффекта мы использовали дополнительные плагины, например YITH WooCommerce Zoom Magnifier. Но теперь, мы можем смело отключить этот плагин и использовать встроенную функцию Woocommerce.

Однако не все так просто. Для активации инструмента «Лупа», необходимо включить в шаблоне, который вы используете для магазина, поддержку инструмента.

Как включить инструмент увеличение изображения при наведении мышки в товаре Woocommerce

Для активации данного инструмента необходимо вставить в код шаблона следующиую функцию:

  1. Зайдите в админку блога
  2. Перейдите в раздел Внешний вид -> Редактор
  3. Откройте файл functions.php для редактирования
  4. Вставьте в файл следующие строчки кода:

add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );

Не забудьте сохранить изменения

Теперь можно посмотреть что получилось.

Перейдите на страницу с товаром и наведите мышку на изображение товара. Поводите мышкой по изображению и вы увидите, как увеличится изображение. На видео записано, как работает инструмент.

Помимо инструмента по увеличения изображения при наведении мышки, также добавлен

  • слайдер (если вы используете галлерею),
  • значок «Лупа» при клике на этот значок, справа вверху, изображение всплывает в отдельном окне и его также можно увеличить при клике, пролистать галерею, и открыть на весь экран

Все это подключается тремя строчками кода, которые описаны выше.

Также важно, чтобы этот функционал работал, у вас должен быть установлен плагин Woocommerce версии 3.0 и выше.

Внимание! Для владельцев интернет магазинов на шаблоне AB-Inspiration —  В шаблоне уже сделаны все необходимые вставки!

Для тех, кто использовал плагин YITH WooCommerce Zoom Magnifier, его можно отключить.

Как добавить увеличение изображения при наведении мышки в товаре Woocommerce

   1 голос
Средняя оценка: 4 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ
Оставьте свой комментарий:

на Блоге
в Фейсбук
в Вконтакте