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()[2] ; $img_size = wc_get_image_size( $image_id, 'full' ); if ( $image_id ) { echo wp_get_attachment_image( $image_id, 'full' ) ; } 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: 629.75px; width: 439.98px;*/ 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; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter