Хочете зробити інтернет-магазин на WooCommerce більш інтерактивним і привабливим? 💻 Ефект зміни зображення товару при наведенні миші — це стильне та просте рішення, яке покращить користувацький досвід і виділить ваш сайт серед конкурентів! 😎 У цій статті ми розберемо, як реалізувати цю функцію за допомогою коду.

Чому варто додати ефект зміни зображення? 🤔

• Покращення UX: Покупці бачать більше деталей товару без зайвих кліків.
• Підвищення залученості: Інтерактивні елементи утримують увагу.
• SEO-переваги: Унікальний функціонал і покращений UX можуть знизити показник відмов, що позитивно впливає на ранжування в пошукових системах.
• Конкурентна перевага: Такий ефект робить ваш магазин незабутнім! ✨

Що потрібно для реалізації? 📋

1. WooCommerce: Переконайтеся, що плагін встановлено та активовано.
2. Галерея зображень: У кожного товару має бути щонайменше два зображення — основне та одне в галереї.
3. Доступ до редагування теми: Через functions.php або плагін, наприклад, Code Snippets.
4. Базові знання CSS і PHP: Але не хвилюйтеся, ми все пояснимо покроково! 😊

Покрокова інструкція з додавання ефекту зміни зображення 🛠️

🧩 Крок 1: Переконайтеся, що у товару є галерея

Для роботи ефекту у кожного товару має бути:

• Основне зображення (завантажується в налаштуваннях товару).
• Галерея зображень (додайте щонайменше одне додаткове зображення в розділі «Галерея» в адмін-панелі).

Якщо у товару лише одне зображення, ефект не працюватиме, оскільки потрібне друге зображення для заміни. Перевірте це в адмін-панелі WooCommerce! 🔍

🧑‍💻 Крок 2: Додаємо PHP-код для виведення другого зображення

Цей код додає друге зображення з галереї в HTML-розмітку сторінки каталогу, але приховує його до наведення миші.

Додайте наступний код у файл functions.php вашої теми або використовуйте плагін Code Snippets для зручності:

add_action( 'woocommerce_before_shop_loop_item_title', 'add_second_product_thumbnail', 11 );

function add_second_product_thumbnail() {
    global $product;

    $attachment_ids = $product->get_gallery_image_ids();

    if ( isset( $attachment_ids[0] ) ) {
        $secondary_image = wp_get_attachment_image_src( $attachment_ids[0], 'woocommerce_thumbnail' );
        if ( $secondary_image ) {
            echo '<img class="secondary-image" src="' . esc_url( $secondary_image[0] ) . '" style="display: none;" />';
        }
    }
}

Що робить цей код?

• Використовує хук woocommerce_before_shop_loop_item_title, щоб додати друге зображення в розмітку.
• Перевіряє, чи є в галереї зображення, і якщо так, додає його з класом secondary-image та приховує через display: none.

🎨 Крок 3: Додаємо CSS для ефекту наведення

Тепер потрібно стилізувати зображення так, щоб при наведенні миші основне зображення зникало, а друге з’являлося з плавним переходом. Додайте наступний CSS-код у файл стилів вашої теми (style.css) або в розділ «Додаткові стилі» в налаштуваннях теми:

.woocommerce ul.products li.product {
    position: relative;
}

.woocommerce ul.products li.product .secondary-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
}

.woocommerce ul.products li.product:hover .secondary-image {
    opacity: 1;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__link img {
    opacity: 0;
}

Що робить цей CSS?

• .woocommerce ul.products li.product: Встановлює позиціонування для контейнера товару.
• .secondary-image: Приховує друге зображення за замовчуванням і задає плавний перехід (transition).
• При наведенні (:hover) друге зображення стає видимим, а основне — приховується.

✅ Результат

Тепер, коли користувач наводить курсор на картку товару в каталозі:

1. Основне зображення плавно зникає.
2. Друге зображення з галереї з’являється з анімацією. ✨

Ефект працює на всіх сторінках каталогу, включаючи віджети WooCommerce Products, якщо вони використовують стандартний шаблон і хук woocommerce_before_shop_loop_item_title.

💡 Корисні поради

• Адаптація під тему: Якщо ваша тема використовує нестандартні класи, перевірте їх через інспектор коду в браузері та замініть селектори в CSS (наприклад, .woocommerce-loop-product__link img).
• Оптимізація зображень: Переконайтеся, що зображення оптимізовані для вебу (розмір до 300 КБ, формат WebP або JPEG), щоб сторінка завантажувалася швидко. Це важливо для SEO! ⚡
• Тестування: Перевірте ефект на різних пристроях. На мобільних пристроях наведення миші не працює, тому подумайте про додавання ефекту для дотику (наприклад, через JavaScript).
• Резервна копія: Перед внесенням змін до functions.php зробіть резервну копію сайту. 🛡️