WooCommerce — мощная платформа для создания интернет-магазинов, но стандартный зум-эффект в галерее товаров может быть неудобным для пользователей. Вместо увеличения изображения по наведению и открытия лайтбокса по клику на иконку лупы, многие предпочитают открывать изображения во весь экран при клике на саму картинку. В этой статье мы покажем, как отключить зум-эффект и настроить полноэкранный просмотр по клику на изображение в галерее WooCommerce, используя код для темы.

Почему стоит отключить зум и настроить клик по изображению?

Зум-эффект в галерее WooCommerce может отвлекать пользователей, особенно на мобильных устройствах, а иконка лупы для открытия лайтбокса не всегда интуитивна. Настройка открытия изображения во весь экран по клику на картинку делает интерфейс более современным и удобным, улучшая пользовательский опыт и повышая конверсию.

Преимущества изменений:

• Простое открытие полноэкранного изображения без лишних действий.
• Улучшение UX на всех устройствах.
• Чистый и современный дизайн галереи.

Как отключить зум-эффект в галерее WooCommerce

Чтобы убрать зум-эффект, добавьте следующий код в файл functions.php вашей темы:

add_action('after_setup_theme', 'remove_zoom_theme_support', 100);
function remove_zoom_theme_support() {
    remove_theme_support('wc-product-gallery-zoom');
}

Объяснение кода:

• add_action('after_setup_theme', ...) — хук, выполняющийся после инициализации темы.
• remove_theme_support('wc-product-gallery-zoom') — отключает эффект зума при наведении на изображение.
• Приоритет 100 обеспечивает выполнение кода после загрузки функций темы.

Этот код полностью убирает эффект увеличения изображения при наведении.

Как настроить полноэкранный просмотр по клику на изображение

Для активации лайтбокса, который открывает изображение во весь экран при клике на картинку (вместо иконки лупы), добавьте следующий код в functions.php вашей темы, например, «Hello»:

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

Как это работает:

• add_theme_support('wc-product-gallery-lightbox') — включает встроенный лайтбокс WooCommerce.
• После добавления этого кода клик по изображению в галерее товара открывает его во весь экран, заменяя стандартное поведение иконки лупы.

Убедитесь, что ваша тема не переопределяет настройки лайтбокса. Если лайтбокс не активируется, проверьте стили и скрипты темы.

Отключение других функций галереи (опционально)

Если вы хотите дополнительно настроить галерею, можно отключить другие функции, такие как слайдер или лайтбокс, с помощью следующего кода:

add_action('after_setup_theme', 'disable_gallery_features', 100);
function disable_gallery_features() {
    remove_theme_support('wc-product-gallery-zoom');
    remove_theme_support('wc-product-gallery-lightbox');
    remove_theme_support('wc-product-gallery-slider');
}

Когда использовать:

• Отключение слайдера (wc-product-gallery-slider) убирает карусель изображений.
• Подходит для создания полностью кастомной галереи.

Дополнительные рекомендации по настройке галереи

1. Проверка темы: Убедитесь, что тема совместима с настройками WooCommerce. Для тестирования можно временно переключиться на стандартную тему, например, Twenty Twenty-Five.
2. Очистка кэша: После внесения изменений в functions.php очистите кэш сайта, чтобы обновления применились.
3. Мобильная адаптация: Проверьте отображение галереи на мобильных устройствах, чтобы обеспечить удобство для всех пользователей.
4. Плагины для упрощения: Если вы предпочитаете избегать работы с кодом, рассмотрите плагины, такие как WooCommerce Additional Variation Images или WooCommerce Customizer.

Решение типичных проблем

• Лайтбокс не открывается по клику: Проверьте, включена ли поддержка лайтбокса в теме. Если проблема сохраняется, обратитесь к документации темы или разработчику.
• Зум-эффект не отключается: Убедитесь, что код добавлен в правильный файл functions.php и приоритет хука достаточно высок.
• Конфликты с плагинами: Отключите сторонние плагины для галереи, чтобы исключить возможные конфликты.

Современная галерея для вашего магазина

Отключение зум-эффекта и настройка полноэкранного просмотра по клику на изображение в WooCommerce делают галерею товаров удобной и привлекательной. Используйте приведенные коды, чтобы легко настроить галерею под ваши нужды.