Return to previous page

Get all thumbnails on single product pages to have the same width and height

This topic has 10 replies, 3 voices, and was last updated 3 months ago ago by Andrew Mitchell

Applesandcider

Participant

July 17, 2024 at 06:25

Hi,

Please see attached screenshot and the red line below one of the thumbnail images.

How do I get all the thumbnail images to have the same width and height, as in this example, the height of the thumbnail image is different to the others.

Page URL has also been attached

Thanks

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#405249 Copied Theme version: 9.3.15

9 Answers

Applesandcider

Participant

July 17, 2024 at 06:27

Also here on the homepage you can also see this thumbnail image on the far right is also a smaller height than the other 3.

Thanks

Files is visible for topic creator and
support staff only.

#405250 Copied
Luca Rossi

Support staff

July 17, 2024 at 08:52
Hi @Applesandcider,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.single-product ul.thumbnails-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 165px;
}

.home .etheme-product-grid-image img {
    min-height: 283px;
    object-fit: cover;
}
```
Hope it helps!
#405294 Copied
Applesandcider

Participant

July 17, 2024 at 10:00

Hi, looks better thank you. Only section it has seemed to effect badly is this section on the homepage, and also the mobile version of it also. Before the images were centred and now they’re to the right. But everything else looks fine and the code worked. Any way to fix those images in the attached?

Thanks

Files is visible for topic creator and
support staff only.

#405316 Copied
Luca Rossi

Support staff

July 17, 2024 at 10:37
Dear @Applesandcider,

We kindly request that you update the previous CSS codes with the following, to ensure they apply specifically to the designated section:
```
.single-product ul.thumbnails-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 165px;
}

.home [data-id="9f8090d"] .etheme-product-grid-image img {
    min-height: 283px;
    object-fit: cover;
}
```
Thank you for your attention to this matter.

Best regards,
The 8Theme Team
#405329 Copied
Applesandcider

Participant

July 17, 2024 at 10:54

Hi,

that fixed the single product section thanks, but the home page section did not change.

#405335 Copied

Applesandcider

Participant

July 17, 2024 at 11:41

I have updated my FTP credentials and WPAdmin access as 8theme staff were having problems accessing. Hopefully now both FTP and WPadmin are accessible.

Thanks

Please contact administrator
for this information.

#405348 Copied
Luca Rossi

Support staff

July 17, 2024 at 11:42
Hi @Applesandcider,

Sorry for the confusion!

The correct codes should be:
```
.single-product ul.thumbnails-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 165px;
}

.home [data-id="38b786d"] .etheme-product-grid-image img {
    min-height: 283px;
    object-fit: cover;
}
```
If it still doesn’t work, please provide us with the Login URL again. We will add some custom class to that section.

Best regards,
The 8Theme Team
#405351 Copied
Applesandcider

Participant

July 17, 2024 at 11:45

That has worked perfectly thank you!

#405355 Copied

Andrew Mitchell

Support staff

July 17, 2024 at 11:45

Dear Applesandcider,

We trust our theme is enhancing your experience. Taking a brief moment to rate it with a glowing 5 stars on ThemeForest would be immensely appreciated. Your feedback holds significant value for us.

Click here to rate now: https://themeforest.net/downloads

Thank you sincerely for your ongoing support!

Best Regards,
The 8Theme Team

#405356 Copied
Tagged: consistent woocommerce thumbnails, equalize woocommerce thumbnail dimensions, uniform product images woocommerce, woocommerce product image resizing, woocommerce thumbnails uniform size, wordpress product image consistency, wordpress woocommerce template customization
Viewing 10 results - 1 through 10 (of 10 total)

The issue related to '‘Get all thumbnails on single product pages to have the same width and height’' has been successfully resolved, and the topic is now closed for further responses

Get all thumbnails on single product pages to have the same width and height

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection