Replace the product image on hover in the shop page

Replace the product image on hover with an animation, even if your theme doesnt support it. This will work for the products displayed in the shop loop (page).

You will need this CSS:

/* Replace image on-HOVER */
.woocommerce ul.products li.product a img { 
    aspect-ratio: 1 / 1;
    object-fit: cover;
    padding: 0;
    margin: 0 auto;
	transition: opacity 0.3s;
}
.woocommerce ul.products li.product a img:nth-of-type(2) {
 position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
	z-index: -1;
}
.woocommerce ul.products li.product a:hover img:nth-of-type(1) {
    opacity: 0;
}

You can replace the aspect-ratio: 1 / 1; to your liking.

          

            Copy
            
          
          //wpsnippet.club
//replace the product image on hover in the shop page
function replace_image_on_hover_shop_page() {

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

    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() ) ; 
    }
}
add_action( 'woocommerce_before_shop_loop_item_title', 'replace_image_on_hover_shop_page' ) ; 

          

            
              How to use this
            
            Copy