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

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