Як вивести додаткове зображення при наведенні на товар в WooCommerce

Щоб показувати додаткове зображення при наведенні на товар у WooCommerce, можна використати плагін або додати власний код у тему. У цьому прикладі ми виведемо перше зображення з галереї товару як друге фото для hover-ефекту.

PHP-код для functions.php

Додайте цей код у файл functions.php вашої теми:

function vchuy_second_thumb_product() {
    $product = wc_get_product( get_the_ID() );

    if ( ! $product ) {
        return;
    }

    $attachment_ids = $product->get_gallery_image_ids();

    if ( is_array( $attachment_ids ) && ! empty( $attachment_ids ) ) {
        $first_image_url = wp_get_attachment_url( $attachment_ids[0] );
        ?>
        <img class="second-img-product" src="<?php echo esc_url( $first_image_url ); ?>" alt="">
        <?php
    }
}

add_action( 'woocommerce_before_shop_loop_item_title', 'vchuy_second_thumb_product', 20 );

Редагування content-product.php

Далі скопіюйте файл:

/wp-content/plugins/woocommerce/templates/content-product.php

у вашу тему за шляхом:

/wp-content/themes/ваша-тема/woocommerce/content-product.php

Після цього обгорніть вивід зображення товару в окремий контейнер:

<div class="ps-product__thumbnail">
    <?php
    /**
     * Hook: woocommerce_before_shop_loop_item_title.
     *
     * @hooked woocommerce_show_product_loop_sale_flash - 10
     * @hooked woocommerce_template_loop_product_thumbnail - 10
     */
    do_action( 'woocommerce_before_shop_loop_item_title' );
    ?>
</div>

Це потрібно для того, щоб основне і додаткове зображення були всередині одного контейнера та коректно працювали зі стилями hover.

CSS для hover-ефекту

Після цього додайте CSS для правильного відображення другого зображення:

.ps-product__thumbnail {
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.product .ps-product__thumbnail img {
    width: 100%;
    height: auto;
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.product .ps-product__thumbnail img.second-img-product {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
}

.product:hover .ps-product__thumbnail img:first-child {
    opacity: 0;
    visibility: hidden;
}

.product:hover .ps-product__thumbnail img.second-img-product {
    opacity: 1;
    visibility: visible;
}