Хотите сделать интернет-магазин на 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 сделайте резервную копию сайта. 🛡️