WooCommerce — как выровнять кнопки “Купить” в списке товаров


Из-за разной длины названий товаров, кнопки “Купить” расположены не на одном уровне. С помощью небольшого CSS сделаем красиво.
ul.products {
display: flex;
flex-wrap: wrap;
}
li.product {
display: flex;
flex-direction: column;
align-items: center;
}
a.woocommerce-LoopProduct-link {
flex-grow: 1;
}
Можно сделать ещё красивее – перенести цену под фотографию товара, тогда все элементы карточки будут на одном уровне.

Для этого воспользуемся кодом, который добавляем в functions.php дочерней темы.
/* WooCommerce: Archive / Shop / Cat Pages */
add_action('init', 'remove_cat_pages_init');
function remove_cat_pages_init() {
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
}
add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_price', 9 );
Спасибо, надеюсь было полезно.
Вроде элементарно, но долго мучился из-за огромного количества классов, спасибо!