[ad_1]
Hi There,
I have a wordpress site with woocommerce. I would like to make that on product list on hover image change the image to the products’s second image. I tried all plugins none of them works.
The product lists made with custom template product loop.
Any idea?
[ad_2]
`<?php foreach ( $products as $product ) : ?>`
`<div class=”product-item”>`
`<?php`
`$product_image_id = $product->get_image_id(); // Get the product’s featured image ID`
`$product_image_url = wp_get_attachment_image_url( $product_image_id, ‘woocommerce_thumbnail’ ); // Get the URL of the featured image`
`$second_image_id = $product->get_gallery_image_ids()[0] ?? 0; // Get the ID of the second product image (if it exists)`
`$second_image_url = wp_get_attachment_image_url( $second_image_id, ‘woocommerce_thumbnail’ ); // Get the URL of the second image (if available)`
`?>`
`<a href=”<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>”>`
`<img class=”product-image” src=”<?php echo esc_url( $product_image_url ); ?>” data-second-image=”<?php echo esc_url( $second_image_url ); ?>” alt=”<?php echo esc_attr( $product->get_name() ); ?>”>`
`</a>`
`<h3 class=”product-title”>`
`<a href=”<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>”>`
`<?php echo esc_html( $product->get_name() ); ?>`
`</a>`
`</h3>`
`<span class=”product-price”><?php echo $product->get_price_html(); ?></span>`
`</div>`
`<?php endforeach; ?>`