Начиная с версии Woocommerce 4 кадрирование изображений делается принудительно и это не всегда красиво.
Я столкнулась с тем, что у меня в основном картинки вертикальные прямоугольные и если ставить без обрезки, то магазин выглядит не аккуратно.
Мое решение этой задачи я рассказываю в видео.
Кусочки кода для исправления проблемы кадрирования изображений Woocommerce:
Этот код вставляем в function.php
// Add the opening div to the img
function add_img_wrapper_start() {
echo '<div class="archive-img-wrap vel_crop">';
}
add_action( 'woocommerce_before_shop_loop_item_title', 'add_img_wrapper_start', 5, 2 );
// Close the div that we just added
function add_img_wrapper_close() {
echo '</div>';
}
add_action( 'woocommerce_before_shop_loop_item_title', 'add_img_wrapper_close', 12, 2 );
Этот вставляем в style.css
.archive-img-wrap.vel_crop {
height: 20em!important;
}
.woocommerce ul.products li.product a img {
width: auto;
height: 20em;
display: block;
margin: 0 0 1em;
-webkit-box-shadow: none;
box-shadow: none;
-o-object-fit: contain;
object-fit: contain;
margin-left: auto;
margin-right: auto
}
*ВНИМАНИЕ! Это решение только для вертикальных прямоугольников и только для конкретной темы. В видео я рассказываю о том, как это применить для других тем/шаблонов.
