Сменить изображение продукта при наведении курсора на страницу архива WooCommerce

Question

Есть ли способ (возможно, с помощью functions. php) изменить изображение продукта в магазинах woocommerce (страница архива) при наведении курсора на первое прикрепленное изображение галереи продукта? Я не могу найти, как нацелить оба. Думаю, это должно быть так:

add_action( 'woocommerce_shop_loop_item', 'change_image_on_hover', 10 );
function change_image_on_hover() {
     $product->get_gallery_image_ids();
     print 'woocommerce_gallery_image';
}

Answer 1

Что, я думаю, вы захотите сделать, предполагая, что ваша установка представляет собой несколько стандартную установку Woo C, - это использовать обработчик действий l oop item для добавления желаемого изображения при наведении курсора.

add_action( 'woocommerce_before_shop_loop_item_title', 'add_on_hover_shop_loop_image' ) ; 

function add_on_hover_shop_loop_image() {

    $image_id = wc_get_product()->get_gallery_image_ids()[1] ; 

    if ( $image_id ) {

        echo wp_get_attachment_image( $image_id ) ;

    } else {  //assuming not all products have galleries set

        echo wp_get_attachment_image( wc_get_product()->get_image_id() ) ; 

    }

}

Предварительный CSS:

/* CUSTOM ON-HOVER IMAGE */
.woocommerce ul.products li.product a img { 
    /* FORMAT ALL IMAGES TO FILL EQUIVALENT SPACE,
    to remove jitter on replacement */
    height: 150px;
    width: 150px;
    object-fit: cover;
    padding: 0;
    margin: 0 auto;
}
.woocommerce ul.products li.product a img:nth-of-type(2) {
    display: none;
}
.woocommerce ul.products li.product a:hover img:nth-of-type(2) {
    display: block
}
.woocommerce ul.products li.product a:hover img:nth-of-type(1) {
    display: none;
}

Вышеупомянутое будет иметь то, что вы хотите для одного типа отображения архива магазина, чтобы обеспечить простую замену, но будет много деталей которые вам могут понадобиться или вы захотите настроить для своего сайта. Например, размер 150x150px может не подходить для вашей темы. Или вы можете решить, что вам нужно полностью заменить изображение по умолчанию другим набором, и что для получения определенного эффекта перехода или согласованности с другими эффектами, используемыми на вашем сайте, вам понадобится другой подход к CSS и, возможно, на javascript.

Answer 2

Вы можете использовать плагин, если вы не удалили действие по умолчанию и фильтр WooCommerce.

Вот плагин ссылка

Answer 3

Это то, что вы ищете?

WooCommerce Product Image Flipper

Кажется, что он не был протестирован с последними 3 основными выпусками Wordpress. Вы все равно можете попробовать и посмотреть.

Эта ветка также, кажется, объясняет, что вам нужно.

Answer 4

CSS может определять, когда пользователь наводит курсор на изображение. Можно ли загрузить оба изображения, а затем просто выключить и включить одно при наведении курсора?

Код для этого будет выглядеть следующим образом:

HTML:

<a id="home">
<img class="image_on" src="images/productImage.png"" />
<img class="image_off" src="images/galleryImage.png" />
</a>

CSS:

.image_off, #home:hover .image_on{
     display:none
}
.image_on, #home:hover .image_off{
     display:block
}

Если это не сработает, проверьте этот поток для другого решения, используя js / jquery