Как сделать всплывающее окно изображений в WooCommerce

3
1169
Всплывающее окно товара в карточке
Всплывающее окно товара в карточке

По умолчанию в магазине WooCommerce Вордпресса изображения в карточке товара открываются в том же окне. Это не удобно, так как пользователю приходится нажимать кнопку «Назад» в браузере чтобы вернуться обратно в карточку товара.

Почему изображение открывается в том же окне?

Возможность открытия изображений в новом окне зависит от выбранного шаблона. Если разработчик шаблона предусмотрел взаимодействие открытия изображений — оно будет работать. Но что делать, если картинка товара открывается в том же окне?

Всплывающее окно изображений в карточке товара

Для того чтобы заработало открытие изображений в новом окне необходимо добавить следующий код в файл функций вашей темы functions.php:

add_action( 'after_setup_theme', 'yourtheme_setup' );
function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}

Код добавляем в самый конец указанного файла. Сразу после этого изображения начнут открываться в модальном окне.

Как сделать прозрачным всплывающее окно?

По умолчанию в woocommerce заливка фонового окна увеличенного изображения чёрного цвета — это не красиво и может сбить с толка пользователя вашего магазина. Чтобы сделать окно полупрозрачным достаточно добавить стилю .pswp__bg следующее свойство:

.pswp__bg {
opacity: 0.5!important;
}

Стиль .pswp__bg необходимо внести в файл стилей вашей темы — style.css. Это можно сделать во встроенном редакторе стилей панели управления Вордпресс. Для этого переходим в пункт панели управления Внешний вид -> Редактор. Если свойство стиля не применилось — значит в шаблоне уже есть указанный стиль — необходимо найти его и сделать соответствующую правку.

Редактор стилей в Вордпресс
Редактор стилей в Вордпресс

В этом примере мы задали 0,5 прозрачности фона для всплывающего изображения. Вы можете варьировать степень прозрачности изменяя значение opacity от 0 до 1. При использовании значений уровня прозрачности объекта допускается использование дробных чисел от 0.0 до 1.0.

3 КОММЕНТАРИИ

  1. Под названием товара ссылка, необходимо, что бы при клике или наведении всплывало изображение.
    Подскажите пожалуйста

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.