• Никакой политики на форуме. Иначе - бан!
  • Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Выровнять изображения товаров на витрине

my-baby

Новичок
Здравствуйте! Заранее извините, если мой вопрос уже решен в какой-то теме. Вижу несколько подобных моему вопросов тем, но не могу сама разобраться, как реализовать какое-то из решений для моего сайта. Пробовала добавлять коды в css, но ничего не меняется.
Сайт https://my-baby-style.ru, тема boutique-kids, скрин страницы с товарами приложила. Скрин.png
Мне нужно, чтобы все товары были одинаковыми по высоте. То есть была ровная сетка. В компьютерной версии еще худо-бедно можно смотреть витрину, но в мобильной вообще кроме того, что все товары "пляшут", еще и кнопка корзины перекрывает часть текста.
Еще в мобильной версии показывает по 2 товара в ряд, наверное с целью опять же улучшить вид, было бы правильнее установить показ 1 товара в ряду (то есть товары друг под другом просто), может быть кто-то может помочь установить такое правило для мобильной версии. После обновления вукомерс не могу разобраться даже, где менять число товаров в ряду в компьютерной версии, возможно, если их уменьшить, то и выглядеть будет получше.
22.jpeg11.jpeg
Помогите, пожалуйста, решить проблему. Я не совсем понимаю, какой файл править и какой код добавлять куда. Заранее спасибо за оказанную помощь!
 
Ссылка на проблему
https://my-baby-style.ru

tuxfighter

Гуру
Местный
не могу разобраться даже, где менять число товаров в ряду в компьютерной версии
Это в настройках темы. Если темой это предусмотрено.
Мне нужно, чтобы все товары были одинаковыми по высоте.
CSS:
.woocommerce .related ul.products li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
    min-height: 570px !important;
}
было бы правильнее установить показ 1 товара в ряду
CSS:
@media only screen and (max-width: 768px){
    .woocommerce .related ul.products li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
   width: 99% !important;
}
}
 

my-baby

Новичок
Спасибо за ответ! Подскажите, пожалуйста, куда конкретно нужно вставить данные коды? У меня есть файлы css и woocommerce.css - нужно добавить в один из них? Они должны быть в каком-то конкретном месте или можно в любом поставить?
 

tuxfighter

Гуру
Местный
Все пользовательские стили добавляются в style.css Дочерней темы или во Внешний вид - настройки - Дополнительные стили, если дочерняя тема не создавалась

А все ваши правки в файлах темы и плагинов - ровно до первого обновления.
 

Ed777

Опытный
Все пользовательские стили добавляются в style.css Дочерней темы или во Внешний вид - настройки - Дополнительные стили, если дочерняя тема не создавалась

А все ваши правки в файлах темы и плагинов - ровно до первого обновления.

Этот код Вы написали что бы товары были одинаковые по высоте
.woocommerce .related ul.products li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
min-height: 570px !important;
}


А как сделать что бы и категории товаров были одинаковые по высоте?
 

my-baby

Новичок
Да, категории пока не выставляла, только товары. Это в перспективе будет.

Добавила код в админке, но ничего не изменилось. Посмотрите, пожалуйста, может неправильно делаю.
 

Вложения

  • 6F8DEC2C-372D-4318-A76B-93E099A1A8F4.jpeg
    6F8DEC2C-372D-4318-A76B-93E099A1A8F4.jpeg
    259.5 KB · Просмотры: 16
Сверху Снизу