Hi all, how would I go about having a hover effect where a secondary product image is displayed when the mouse is hovered over a product in the archive?
Just checking in to see if anyone has found something that works.
I’ve come across this code on stackoverflow:
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()[1] ;
if ( $image_id ) {
echo wp_get_attachment_image( $image_id ) ;
} else { //assuming not all products have galleries set
echo wp_get_attachment_image( wc_get_product()->get_image_id() ) ;
}
}
with this css:
/* CUSTOM ON-HOVER IMAGE */
.woocommerce ul.products li.product a img {
/* FORMAT ALL IMAGES TO FILL EQUIVALENT SPACE,
to remove jitter on replacement */
height: 150px;
width: 150px;
object-fit: cover;
padding: 0;
margin: 0 auto;
}
.woocommerce ul.products li.product a img:nth-of-type(2) {
display: none;
}
.woocommerce ul.products li.product a:hover img:nth-of-type(2) {
display: block
}
.woocommerce ul.products li.product a:hover img:nth-of-type(1) {
display: none;
}
I can see how this could work but all it ends up doing right now is glitching the product repeater item when it’s hovered over.
Anyone have some ideas?
Any luck displaying first gallery image on product hover?
Hello there did you had any luck with it?
Hi there. Does anyone know a solution for this? I mean, it’s something basic for every ecommerce. But even with action and hooks, it doesn’t work.
I’m using de Products widget, and when I try to do some action in the fields, it doesn’t display the result. Even if I try to query an ACF image of the product.
This is the function I’m using to get the second image of the product gallery:
function get_first_gallery_image_auto() {
global $product; // Pega o produto global do loop do WooCommerce
if ($product && $product->get_gallery_image_ids()) {
$gallery_image_ids = $product->get_gallery_image_ids();
$first_image_id = $gallery_image_ids[0];
return wp_get_attachment_image_url($first_image_id, 'woocommerce_thumbnail');
}
return false;
}
Hey guys. I got a great result. This is my solution.
Code for functions.php:
function get_first_gallery_image_auto() {
global $product; // Pega o produto global do loop do WooCommerce
// Verifica se o produto existe
if ($product && $product->get_gallery_image_ids()) {
// Pega a primeira imagem da galeria
$gallery_image_ids = $product->get_gallery_image_ids();
$first_image_id = $gallery_image_ids[0];
// Retorna a URL da primeira imagem no tamanho 'woocommerce_thumbnail'
return '<div class="secondary-image"><img src="'.wp_get_attachment_image_url($first_image_id, 'woocommerce_thumbnail').'" class="attachment-large size-large"></div>';
}
return false; // Retorna false se não houver galeria
}
add_filter( 'bricks/code/echo_function_names', function() {
return [
'get_first_gallery_image_auto',
];
} );
CSS:
/** ARCHIVE PAGE **/
.secondary-image {
position: absolute;
opacity: 0;
-webkit-opacity: 0;
transition: all 0.2s;
}
ul.products li.product:hover .secondary-image {
opacity: 1;
}
Hope it works for you too!
Hi lavuh,
Thanks for your snippet! It’s working. But how can I use in custom loop? Do you have an idea?
I’m using it with the Products widget from Bricks. But I believe you can use in a custom loop. Have you tried to use the custom function instead of {featured_image} ?
I’ve solved with this:
I’ve added custom code widget and paste this code:
<?php echo get_first_gallery_image_auto(); ?>
and done