Secondary Product image for WooCommerce adds a hover effect that will reveal a secondary product thumbnail to product images on your WooCommerce product listings.

Just copy and past this code in your theme’s functions.php file.

/**
 * Add secondary product image.
 *
 */
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()[0] ?? null; 
if ( $image_id ) {
        echo wp_get_attachment_image( $image_id, 'shop_catalog', '', $attr = array( 'class' => 'hover-image' ) );
    } 
}

Write some small css

.woocommerce
  {
    ul.products
     {
       li.product
        {
          a.woocommerce-LoopProduct-link
           {
             img
             {
               position:relative;
               z-index:1;
               transition: all .5s ease-out 0s;
                &.hover-image
		 {
		   position:absolute;
		   top:0;
		   left:0;
		   z-index:-1;
		   opacity:0;
		   transition: all .5s ease-out 0s;
	         }
             }
           }
          &:hover
           {
             a.woocommerce-LoopProduct-link
              {
                img
                {
                  &.hover-image
                   {
                     opacity:1;   
                   }
                }
              }
           }
        }
     }
  }