https://youtu.be/DSrMQJev6jg
Начиная с версии 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 }
*ВНИМАНИЕ! Это решение только для вертикальных прямоугольников и только для конкретной темы. В видео я рассказываю о том, как это применить для других тем/шаблонов.