Replace the product image on hover in the shop page

Bookmark

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

How to use this

Replace the product image on hover in the shop page

wpsnippet.club

Share with friends

If you need help, contact us here

Related Snippets

Leave a Reply Cancel reply