Return to previous page

Change Hover Image to Last Gallery Image in WooCommerce Product Grid

This topic has 7 replies, 3 voices, and was last updated 4 weeks ago ago by Andrew Mitchell

Vítor Carneiro

Participant

February 12, 2025 at 10:19

Hello,

We are using your theme on our WooCommerce store, and we would like to modify the product image hover effect. Currently, when hovering over a product, the frist image from the gallery is displayed. Instead, we want the hover effect to display the last image from the product gallery.

Could you please guide us on how to achieve this within the theme settings or through custom code?

Current behavior:

The second image in the gallery appears on hover.

Desired behavior:

The last image in the gallery should appear on hover instead of the second one.

We appreciate your help! Let us know if we need to adjust any theme settings or override any specific functions.

Thank you!

#434116 Copied Theme version: 9.4.2

6 Answers
Luca Rossi

Support staff

February 13, 2025 at 08:41
Hi @Vítor Carneiro,

Please take a look these files:

– /wp-content/plugins/et-core-plugin/app/controllers/elementor/general/product-grid.php at the line 4389
– /wp-content/plugins/et-core-plugin/app/controllers/elementor/general/product-carousel.php at the line 3080

Find this code:

if ( ! empty( $attachment_ids[0] ) ) { $image = wp_get_attachment_image( $attachment_ids[0], $size, false ); }

And change to this:

if ( ! empty( $attachment_ids ) ) { $image = wp_get_attachment_image($attachment_ids[count($attachment_ids)], $size, false ); }

Hope it helps!
#434195 Copied
Vítor Carneiro

Participant

February 13, 2025 at 11:37
Hello, it wasn’t working with the suggested code, but I changed it to this:

if ( ! empty( $attachment_ids ) ) { $last_attachment_id = end($attachment_ids); // Gets the last ID directly $image = wp_get_attachment_image( $last_attachment_id, $size, false ); }

and it worked, but now I need to apply it to the global store page, where all the products and categories appear. Where do I have to add this code?
#434209 Copied
Luca Rossi

Support staff

February 13, 2025 at 16:06

Hi @Vítor Carneiro,

Please sure you made changes on both files.

Could you please provide temporary wp-admin access? We need to check your settings.

To grant WP-Admin access, please proceed to create a new user account with an administrator role through your WordPress Dashboard. Once the account is established, you may securely transmit the username and password to us via the Private Content section designated for this purpose.

Thank you!

#434260 Copied

Vítor Carneiro

Participant

February 13, 2025 at 16:19

WP-Admin access in private area

Please contact administrator
for this information.

#434263 Copied
Luca Rossi

Support staff

February 14, 2025 at 06:41
Hi @Vítor Carneiro,

Please also add this code under functions.php file locates in your child theme or Code Snippets plugin:

function etheme_get_second_image( $size = 'woocommerce_thumbnail' ) { global $product, $woocommerce_loop; $attachment_ids = $product->get_gallery_image_ids(); if ( etheme_get_option('enable_variation_gallery', false) && etheme_get_option('variable_products_detach', false) && $product->get_type() == 'variation' ) { // take images from variation gallery meta $variation_attachment_ids = get_post_meta( $product->get_id(), 'et_variation_gallery_images', true ); // Compatibility with WooCommerce Additional Variation Images plugin if ( !(bool)$variation_attachment_ids ) $variation_attachment_ids = array_filter( explode( ',', get_post_meta( $product->get_id(), '_wc_additional_variation_images', true ))); if ( (bool) $variation_attachment_ids && count((array) $variation_attachment_ids) ) { $attachment_ids = $variation_attachment_ids; } else { // if inherit parent second image $parent = wc_get_product( $product->get_parent_id() ); $attachment_ids = $parent->get_gallery_image_ids(); } } $image = ''; if ( ! empty( $attachment_ids ) ) { $last_attachment_id = end($attachment_ids); // Obtém o último ID diretamente $image = wp_get_attachment_image( $last_attachment_id, $size, false ); } if ( $image != '' ) { echo '<div class="image-swap">' . $image . '</div>'; } }

Hope it helps!
#434289 Copied
Andrew Mitchell

Support staff

February 14, 2025 at 08:56

Dear Vítor Carneiro,

As we continue our mission to exceed expectations, your insights become increasingly valuable. Could we, with all due respect, request your thoughtful feedback by giving our theme a deserved 5-star rating on ThemeForest?

Click here to share your valuable perspective: https://themeforest.net/downloads

Your time and trust are highly appreciated!

Best Regards,
The 8Theme Team

#434302 Copied
Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘Change Hover Image to Last Gallery Image in WooCommerce Product Grid’' has been successfully resolved, and the topic is now closed for further responses

Change Hover Image to Last Gallery Image in WooCommerce Product Grid

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection