Woocommerce

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.

    
//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' ) ;

Leave a Reply