Return to previous page

Thumbnail gallery hover product image…

This topic has 4 replies, 2 voices, and was last updated 10 months, 1 weeks ago ago by Rose Tyler

Jonathan

Participant

February 13, 2024 at 11:15

Hello,

The main product images on my website have different sizes. Some are more square, some are more rectangular. But all the gallery images are exactly the same size.

My problem is that when hovering over a product, the gallery image looks very small and does not match the size of the main image, which gives a very weird feeling.

https://prnt.sc/-JE1ztL5xPmn

What I need is for the gallery image to fit and cover the full area of the main image.

https://prnt.sc/6vns0htGA8-y

Could you tell me if there are any settings or CSS styles I can apply to do this please?

Thank you so much!!!

Please, contact administrator
for this information.

#383233 Copied Theme version: 9.2.6

3 Answers
Rose Tyler

Support staff

February 13, 2024 at 15:20
Hello, Jonathan,

Thank you for reaching out to us with your concern regarding the product images on your website.

You can try adding the following CSS code which may help the gallery images to cover the full area of the main image container:
```
.content-product .product-content-image img, .category-grid img, .categoriesCarousel .category-grid img {
    height: 100%;
    object-fit: cover;
}
```
Best Regards,
8Theme’s Team
#383266 Copied
Jonathan

Participant

February 14, 2024 at 10:17

Awesome, it works perfect.

But I have noticed that WordPress selects by default a cropped thumbnail with a very small size, and when it is increased to fit the size it looks pixelated.

https://prnt.sc/fmAy-sG09peO

Maybe some plugin or some way to modify the image size that WordPress uses for the thumbnails in this section?

Do you think there could be a solution?

Thank you very much again for the help.

#383326 Copied

Rose Tyler

Support staff

February 14, 2024 at 11:08

Hello, Jonathan,

We kindly request that you review the following article: https://www.8theme.com/documentation/xstore/woocommerce/product-images/. Upon reviewing, please proceed to adjust the Thumbnail width to 507 by navigating to Appearance > Customize > WooCommerce > Product Images within your dashboard. Subsequently, it is necessary to regenerate the images utilizing a suitable plugin. Once completed, we would appreciate it if you could verify the outcome.

Best Regards,
8Theme’s Team

#383331 Copied
Tagged: advanced wordpress templates, customizable woocommerce themes, ecommerce website design, product image hover, responsive woocommerce theme, thumbnail gallery hover, wordpress woocommerce templates
Viewing 4 results - 1 through 4 (of 4 total)