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 );

Спасибо, надеюсь было полезно.