How to make a flat product grid?

The products in my store have different images (vertical, horizontal, square). How to make a flat product grid? Why are images not being scaled to a fixed area?

Attachments:

You must be logged in to view attached files.

Hello,

Please follow the instructions on this manual: https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

If you have any questions please feel free to contact us.

Best Regards

Данная статься не помогает в решении вопроса. Мы можем предоставить вам логин и пароль от сайта, поможете удалённо решить проблему?

Hello,

You need to upload images of the equal size and proportion. Such cannot be corrected with customization.

In addition, the product title should be of the same length. You will find how to find and enable this option in the manual I provided above.

Best Regards

Если у нас будет 10000 товаров, как вы себе представляете под каждый товар делать картинки одинакового размера? Почему нельзя сделать контейнер для изображения определённой высоты и уже внутри контейнера масштабировать фотографию?

Hello,

The cropping option described in the https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/ just does what you suggest, however, the view is not good when images are of different sizes.

I can give you the code that would set the equal height for the box and here is the result you will get: https://gyazo.com/7588e5356f14ee9eae872bb76d43844a

The image nature does not allow to just equal sizes. That is why the only option is the cropping images in the Woocommerce options.

Please give me the page URL I will check once more, however, I do not promise I would be able to do something.

Best Regards

Hello,

https://demo.1001elka.by/catalog/iskusstvennye-elki/

На текущий момент у нас стоит “использовать оригинальные пропорции”.

При установке максимальной высоты изображение не масштабируется внутри контейнера.

Hello,

There are two ways only: upload equal size images or crop them. No more option in our theme or in Woocommerce.

You can alternatively try this СSS:

.product-grid-item .product-image-link img, 
.product-grid-item .hover-img img {
	max-height: 250px;
	object-fit: contain;
}

Best Regards

Спасибо, возможно это решение нас устроит.

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts