Картинки товаров в каталоге

Тема Woodmart + Elementor + красивый вывод картинок в каталоге

Не спрашивайте зачем я использую Elementor — это не я, это клиенту надо иметь простое и понятное для него решение чтобы что-тона сайте самостоятельно делать. А так как клиент всегда прав, то никакие аргументы, что Elementor — это тонны стилей и скриптов, не работают.

Elementor и тема Woodmart

Сейчас если на сайт загружаются товары из каталогов b2b то как правило там картинки уже оптимизированы и имеют нормальный для каталога одинаковый размер, но бывают исключения и если источников товаров много то и картинки товаров разных размеров, и это всё надо как-то красиво, одинаково и аккуратно отобразить на сайте.

Решение: картинки в каталоге

Эти классы есть в этой связке: WordPress + Woocommerce + Woodmart + Elementor и вот моё решение.

.products .product-element-top {
    height: 250px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px !important;
}
.products .product-element-top img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 220px !important;
    object-fit: contain !important;
}