Return to previous page

How to set the dimension of the image field in the product list

This topic has 14 replies, 3 voices, and was last updated 2 years, 10 months ago ago by Olga Barlow

Chris

Participant

January 8, 2022 at 08:09

Hello,
I have a question about the dimension of the image field in the product list on the home page and in the categories in the product list.

We prepare all the photos in 1080X1623px size. However, there are times when photos are square and we need to additionally resize them.

How to set that the cell always has such a dimension related to the 1080x1623px photo format and centered vertically and horizontally?

#313933 Copied Theme version: 8.0.1.

13 Answers

Rose Tyler

Support staff

January 8, 2022 at 11:55

Hello,

Please read these articles – https://www.8theme.com/documentation/xstore/woocommerce/product-images/ https://woocommerce.com/document/fixing-blurry-product-images/

Regards

#313954 Copied

Chris

Participant

January 8, 2022 at 13:13

Thank you for your response. This I know. I don’t care about resizing the image. I want to change the size of the Box/field they are in. I want the 1080×1623 area (or its appropriate size in miniarures) to accommodate even a square image that will be positioned in the middle, but it will look like it is prodtangular because the frame area will just be rectangular. Now I have it that if I don’t convert the photo to 1080×1623 then the ones we have in the square will render that way, and it causes confusion and ugly positioning. 🙂

#313961 Copied
Olga Barlow

Support staff

January 10, 2022 at 11:41
Hello,

There is no such option.
You can add fixed height for the image block and align images inside that block using below custom
```
.template-container .content-product .product-content-image, .template-container .content-product .image-swap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.template-container .content-product .product-content-image img, 
.template-container .category-grid img, .template-container .categoriesCarousel .category-grid img {
    width: auto;
}
@media only screen and (min-width:1200px){
    .template-container .content-product .product-content-image, .template-container .content-product .image-swap {
    height: 420px;
}
}
```
Check if this helps you.

Regards
#314076 Copied
Chris

Participant

February 4, 2022 at 15:57

Everything is beautiful. Thank you.
There was just a problem, because the bars with information (stickers) also went higher when the photo is smaller or in a square. Is it possible to do something about it?
Here is an example:
https://www.mamaijejszafa.pl/product-category/akcesoria/ksiazki/

#316201 Copied

Rose Tyler

Support staff

February 5, 2022 at 09:08

Hello,

Could you provide a screenshot?

Regards

#316256 Copied

Chris

Participant

February 5, 2022 at 10:10

https://ibb.co/jLmVwX7 🙂 🙂

#316264 Copied
Rose Tyler

Support staff

February 5, 2022 at 14:08
Add the next code in Theme Options > Theme custom CSS > Desktop:
```
.tax-product_cat .awl-position-type-on-image {
    bottom: -25% !important;
}
```
Regards
#316289 Copied
Chris

Participant

February 5, 2022 at 17:31

Thank you. It worked great. On the category page, but… on the Store page no longer. 🙁

https://www.mamaijejszafa.pl/sklep/

https://ibb.co/LSWpdr2

#316309 Copied
Rose Tyler

Support staff

February 6, 2022 at 15:46
Change this code https://prnt.sc/26posvo to
```
.product-content-image > div {
    min-height: 100%;
}
```
Regards
#316338 Copied
Chris

Participant

February 6, 2022 at 16:28

Thank you 🙂
It’s almost right now. I’m trying to improve it, but it’s not working for me. Now the images are at the top again. This is the last question on this. If it doesn’t work, I’ll leave it as is.

#316341 Copied

Olga Barlow

Support staff

February 7, 2022 at 17:53

Hello,

Provide us with a mockup of the result that you try to achieve that displays both images full height and square. Because I’m not sure that understand how your grid should look to give you the correct code.

Regards

#316422 Copied

Chris

Participant

February 8, 2022 at 07:42

Hello,
What I mean by this is that the images are back to the middle again in terms of height. The earlier code already achieved this. The sticker one changed it. I tried to set it myself, but I don’t know for what reason it is not possible.

https://ibb.co/GvHdyjT

https://www.mamaijejszafa.pl/product-category/akcesoria/ksiazki/

#316479 Copied
Olga Barlow

Support staff

February 8, 2022 at 14:33
Hello,

Do you want to show them in this way https://prnt.sc/26qwynf ?
Then add the below code to Theme Options > Custom CSS
```
.content-product .product-content-image, .content-product .product-content-image picture, .content-product .product-content-image > div {
    display: flex;
    align-items: center;
    justify-content: center;
}
```
Regards
#316531 Copied
Tagged: best selling themes, dimension setting, image field, persuasive, seo friendly, woocommerce
Viewing 14 results - 1 through 14 (of 14 total)

The issue related to '‘How to set the dimension of the image field in the product list’' has been successfully resolved, and the topic is now closed for further responses

How to set the dimension of the image field in the product list

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection