Hover effect on product grid not correct for horizontal images.

Hi there, on my product grid widgets the image zoom effect is not correct for all image ratios.

For horizontal images (width > height) the thumbnail used for the zoom effect should be cropped automatically and horizontally center the image. However, it gets cropped from left to right resulting in 2 white blank spaces of padding being visible on the top and bottom which looks very clunky. Could you please write me a snippet of code which can fix this? Thanks very much in advance

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

In addition, please provide the page URL with the problem.

Best Regards

Thank you for your reply,

I placed the info in the private content box

Sorry, but we don’t understand what is wrong with the hover image. Your main and hover images have different sizes. They can’t look the same as with the product with similar images.

Kind Regards

The product which display correct have different images as well. but they are pictures which have a larger height than width.

Why wouldn’t it be possible to instead cover/fill the image in the same way for pictures with a larger width than height? It looks very unprofessional now, and it should be fixable.

Attachments:

You must be logged in to view attached files.

If you want to crop the image, you can enable this in Appearance -> Customize -> WooCommerce -> Product images.

I fixed the product bundle thumbnail issue now on the live site by uploading a new picture and cropping it to 1:1 before uploading. The other image was also cropped in wordpress media, however the original image was not square and one way or another the cropped version was not used in the frontend. Cropping the bundle images is doable for all new product bundles, because these images can be square anyways.

However, for the other issue (zoom on hover issue), do you think i can fix it by cropping the thumbnails in Woocommerce? Maybe i can regenerate thumbnails in wordpress?

I cant crop these image myselve, because not all full images (Those used for the zoom) are square. Some are rectangular.

also, for the product bundle the ATC button still displays different than for regular products. Is this something that can be fixed? It seems that the ‘PRODUCT BEKIJJKEN’ text doesn’t apply to bundled product ATC buttons

Please, keep your replies for separate issues in separate topics to not confuse things.

As for the cropping, yes, you can enable it in WooCommerce settings and they will be cropped automatically.

So why are they not cropped yet? As the setting is already enabled.

You overridden images size for the products element so settings from WooCommerce are not effective on the home page now https://gyazo.com/a55031708f38bd4853d7bcb72d80f64a

[Author]

Posts