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

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

• loop
• woocommerce-offtopic
• gallery

2 Answers 2

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.

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