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 роблять галерею товарів зручною та привабливою. Використовуйте наведені коди, щоб легко налаштувати галерею відповідно до ваших потреб.