Как выровнять коробки с товаром снизу на странице архива Woocommerce, сохраняя при этом изображения без обрезки?

Question

Я пытаюсь выровнять продукты, отображаемые на архивных страницах WooCommerce, так, чтобы большие изображения можно было видеть такими же большими, как и меньшие изображения в одной строке.

Я хочу эту страницу

https://dewaldthuysamen.com/trophy/product-category/trophies/hockey-trophies/

Чтобы показать продукты, выровненные снизу, как эта страница

http://trophyshoponline.co.za/hockey.html

Спасибо,

Я уже пробовал это какЯ думал, что это сработает, но, возможно, нужно изменить CSS-идентификаторы.

Вертикально выровнять изображения товара с основанием

Answer 1

Добавьте следующий фрагмент кода в functions.php вашей активной темы -

function archieve_styles() {
    $custom_css = "
        .woocommerce ul.products{
            display: inline !important;
        }
        .woocommerce ul.products .product{
            display: inline-block;
            vertical-align: bottom;
            float: none;
        }
        body .oceanwp-row .span_1_of_5 {
            width: 19%;
        }";
    wp_add_inline_style( 'woocommerce-inline', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'archieve_styles', 999 );