It’s almost impossible to scroll the product page because of this zoom when the image is vertical.

Thanks in advance!

check screenshot : https://prnt.sc/tqqSlqwoVyTn

I applied CSS to one tile but its not reflecting changes Here’s code :

a.slide-image:hover {
    background: #000;
}

Any suggestion please ?

I am developing a website and I would like the funcion to: When I hover a product image on the main shop/category pages, I wanted the image to change to another one from the product image gallery. So basically show a different image of the same product only when hovering with the mouse.

Some things to take note:

I am using a Loop Grid to make the archive.

I want a different image for each product.

Is that possible to do with any .css ?

I hope someone can help me out. Woocommerce does not have a default function to show a secondary image of a product on the storefront when hovering over the thumbnail. There are plugins to do this, but they are either expensive or just plain bad.

I think a rather simple principle could be applied to achieve the effect, by loading the first image of the product gallery to the storefront and fiddle around with CSS for the hover effect.

Can anyone tell me how to load the gallery image, so its <img> tag gets printed right below the default image in the storefront html? I’m looking for a php function to add to my child theme. Woocommerce loads images in product-image.php, located in the templates folder.

But because I didn’t know about you, I used PHP Code snippets to hook into WooCommerce as you can see here– https://prnt.sc/-u1cwnzr5ycx

I however, still have some small things I want to do, that I still haven’t found the solution.

1.) If you go here— https://shoptimizerdemo.commercegurus.com/

You will not see “Add to Cart” Button on the Product Archives.

But when you Hover the mouse over the Product Image, the “Add to Cart” Button then appears– as can be seen here— https://prnt.sc/YMjWMYxIj7Mk

Please, do you have, or know of any PHP Code Snippet that I can use to achieve something like that?

Or, can your plugin do something like that?

2.) BOX SHADOW AND BORDER RADIUS AROUND PRODUCT CARDS: I will like to add Box Shadow and Border Radius around Product Archives. How do I do that?

Needing to hear from you soon.
Regards.