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

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

По умолчанию в магазине 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.

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

Please enter your comment!
Please enter your name here