How to get the first image gallery of a product in woocommerce in a loop

Question

I want to display a product with a product image and when visitor hovers over that image, it will change to the first image from the product gallery. I am using this code to display the image gallery, but it displays all the images from product gallery. I just want the 1 image.

  <?php do_action( 'woocommerce_product_thumbnails' ); ?>

Anybody know how to resolve this problem? Really appreciate any ideas.

Regards

Answer 1

Along with the product thumbnail (I'm assuming you have this), what you need is a list (array) of the product images - WooCommerce has such methods, eg $product->get_gallery_attachment_ids().

You can grab the first ID in the array and use it to fetch the single image using wp_get_attachment_image(), or wp_get_attachment_url(), etc., then use that as an alternate source for the main (thumbnail) image.

Incidentally, the woocommerce_product_thumbnails call is outputting markup that you probably don't want to use. You'll need to either discard this or unhook functions from it to get the output you want.

Answer 2

2018 Update: Need to use get_gallery_image_ids(); instead. Then use wp_get_attachment_url() with the first ID in the array returned.

$product->get_gallery_image_ids();