Return to previous page

Set minimal sizes for pictures on category and product page

This topic has 9 replies, 4 voices, and was last updated 5 months ago ago by Andrew Mitchell

Arnan

Participant

May 15, 2024 at 13:56

Hi, I have a question about images. I have many images in my shop that are supplied by suppliers. They are generally of excellent quality but unfortunately not always the same size. This makes the height of the photo a problem in particular. If a product photo is wider than its height, my products will not all appear on the category page at the same time. The shopping cart buttons are then not aligned, for example. I have already tested with the image settings, but unfortunately I can’t get it to work properly.

The product page also shows a photo that is wider than it is high; display problems. Thumbnails of other photos are therefore not fully displayed. (See the photos I added for both examples).

My question is, is there perhaps a piece of CSS code available that can ensure that when photos are low and wide they are centered by default in a 600 h x 400 w image size? Or are there other ways to get this right?

Files is visible for topic creator and
support staff only.

#395301 Copied Theme version: 9.3.9

8 Answers

Rose Tyler

Support staff

May 15, 2024 at 16:01

Hello, Arnan,

Thank you for reaching out to us with your query.

Please provide URLs of pages from your screenshots.

Best Regards,
8Theme’s Team

#395321 Copied

Arnan

Participant

May 15, 2024 at 16:05

Hi Rose,

Please see the Private content area.

Kind regards, Arnan

Please contact administrator
for this information.

#395323 Copied

Rose Tyler

Support staff

May 16, 2024 at 08:16

Hello, Arnan,

Please provide URLs of pages from your screenshots.

Best Regards,
8Theme’s Team

#395411 Copied

Arnan

Participant

May 16, 2024 at 08:28

Hi Rose, see the private content area for the links. As you may know, the website is not yet live and you can log in using the previously shared login details.

Please contact administrator
for this information.

#395415 Copied
Jack Richardson

Support staff

May 16, 2024 at 13:54
Dear @Arnan,

We hope this message finds you well. To achieve uniform proportions for all product images on your shop page, we recommend implementing the following custom CSS as a one of possible solutions:
```
.content-product .product-content-image img {
    aspect-ratio: 4/3;
    object-fit: contain;
}
```
You can view the expected outcome here: https://prnt.sc/8NI6V-e8Ndkb.

For a similar adjustment on single product pages, please add the following CSS:
```
.woocommerce-product-gallery__image img {
    aspect-ratio: 1/1;
    object-fit: cover;
}
```
Feel free to experiment with different aspect ratio proportions to find the most suitable ones for your needs.

Best regards,
Jack Richardson
The 8Theme Team
#395488 Copied
Arnan

Participant

May 16, 2024 at 15:00

Hi Jack, this seems to work nice. I will test it in several settings later today. Thanks for this solution.

#395502 Copied

Rose Tyler

Support staff

May 17, 2024 at 06:24

Hello, Arnan,

You’re welcome!

Best Regards,
8Theme’s Team

#395546 Copied

Andrew Mitchell

Support staff

May 17, 2024 at 07:32

Dear Arnan,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#395555 Copied
Tagged: category page images, customize woocommerce images, minimal picture sizes, optimized woocommerce images, product page images, wordpress woocommerce templates
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘Set minimal sizes for pictures on category and product page’' has been successfully resolved, and the topic is now closed for further responses

Set minimal sizes for pictures on category and product page

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection