Добавить в корзину выравнивание кнопок, необходимое в интернет-магазине

Question

На главной странице моего магазина кнопки товаров add to cart не выровнены.

Посмотри эту картинку

Исправить это можно было бы просто сделать заголовки короче или сделать каждый заголовок в 2 строки, но это доставило бы мне больше проблем с моим category pages.

Есть ли способ просто исправить это здесь, на первой странице?

Answer 1

Опция # 1: Установите position: relative и, необязательно, min-height на li.product и установите position: absolute и bottom: 0 на кнопках [Добавить в корзину] в CSS вашей темы. Обратите внимание, что ваша тема может использовать разные классы / идентификаторы. Если те, которые я использовал, не работают, вам нужно проверить с помощью инструментов инспектора вашего браузера , чтобы увидеть, что использовать для вашей темы:

li.product {
  position: relative;
  min-height: 400px; // you may or may not need to set the height 
}

li.product a.button {
  position: absolute;
  left: 0; // combined with right: 0, will center the button
  right: 0; // combined with left: 0, will center the button
  bottom: 0;
}

Вариант № 2: Установите min-height в заголовке вашего продукта (например, h2)

li.product h2 {
  min-height: 100px; // Adjust to account for your shop's product with the longest title
}