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() ) ; 

    }

}

/* 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;
}

 

Bài viết liên quan

post-no-image

Tuỳ biến phần search WordPress chính xác hơn, tìm kiếm theo tiêu đề

post-no-image

Cách quét và tìm virus trong Database WordPress để loại bỏ mã độc Malware

post-no-image

Hướng dẫn custom Multiselect box

post-no-image

Tránh gửi mail nhiều lần khi nhấn gửi form trong contact form 7

post-no-image

Hướng dẫn tạo email template để gửi mail qua: Outlook App, Outlook website, Gmail, Apple Mail…

post-no-image

Hướng dẫn tắt tính năng mua hàng nhưng vẫn hiển thị giá trong Woocomerce