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

Вывод кнопки или цены на одном уровне

День добрый ! Подскажите , как вывести на витрине товара , кнопку или цену на одном уровне не зависимо от длины названия. Где то на форуме ,уже как будто встречал, но не могу найти .
 
Спасибо ! Но цены находятся на разных уровнях. А мне надо пускай внутри увеличенный отступ , но чтобы внешние границы и цена ( или кнопка, или то или другое, ведь кнопу спрятать можно) были на одном уровне
 

rikitiki

Специалист
Местный
Да, многим это не нравится. Длина заголовков в витрине не ограничивается. Поэтому вертикальное положение того что ниже заголовков будет зависеть от длины заголовков.
Единственное решение это сделать фиксированную высоту под заголовки или ограничить их определённым количеством строк с многоточием на конце. К сожалению в CSS такое можно сделать одной строкой, а для подрезки большего количества строк нужен скрипт. Подрезка с помошью php по количеству букв не прокатывает из-за того что ширина товаров в витрине относительная.
 
Последнее редактирование:
Нашел подсказку, но как ее осуществить , поменять разметку не знаю
https://wpcommerce.ru/threads/nastrojka-setki-tovarov.1081/

это плохой вариант решения выставлять фиксированную высоту и высоту строк.
Правильное решение должно быть таким
<div ваш родительский блок>
<div class = "img_title">Картинка и заголовок</div>
<div class = 'after_price'>Цена и кнопка куиить</div>
</div>

Нужно изменить разметку как я показал и применить следующие стили
родитльский блок {
position:relative;
height:500px; // или любая по вашему желанию
}
.after_price {
position:absolute;
bottom:0}
В этом случае цена и кнопка будут всегда прижаты к низу карточки товара.
А заголовки могут быть любой длины.


Кто может помогите !!!!!!!!!!!!!!!!!!
 

searchingman

Гуру
Местный
Вопрос нужно ставить исключительно в контексте конкретной темы, т.к. это зависит от того как сверстана тема.
Дайте ссылку на используемую вами тему, а лучше на ваш сайт.
 

searchingman

Гуру
Местный
Нашел подсказку, но как ее осуществить , поменять разметку не знаю
https://wpcommerce.ru/threads/nastrojka-setki-tovarov.1081/

это плохой вариант решения выставлять фиксированную высоту и высоту строк.
Правильное решение должно быть таким
<div ваш родительский блок>
<div class = "img_title">Картинка и заголовок</div>
<div class = 'after_price'>Цена и кнопка куиить</div>
</div>

Нужно изменить разметку как я показал и применить следующие стили
родитльский блок {
position:relative;
height:500px; // или любая по вашему желанию
}
.after_price {
position:absolute;
bottom:0}
В этом случае цена и кнопка будут всегда прижаты к низу карточки товара.
А заголовки могут быть любой длины.


Кто может помогите !!!!!!!!!!!!!!!!!!
Попробовал предложенный принцип на теме customizr. Выглядит так http://take.ms/Gc3zz
Давайте ссылку на страницу вашего сайта с товарами, подскажу.
 

searchingman

Гуру
Местный
1. Устанавливаем фиксированную высоту блока товара
HTML:
.woocommerce ul.products li.product {
  width: 21%;
  height: 355px; /* указать свою высоту */
}
2. Блоки с кнопкой "Добавить в корзину" и цена прижимаем к нижнему краю.
HTML:
.woocommerce ul.products li.product .price {
  position: absolute;
  bottom: 50px;
  left: 40px;
}
HTML:
.woocommerce ul.products li.product .button {
  position: absolute;
  bottom: 0;
}
Конечный результат выглядит так http://take.ms/514Bo
 
Последнее редактирование:
Спасибо ! Но ..... увеличивается и расстояние между блоками категорий на витрине категорий и магазина. Я с этим уже 5 часов бъюсь !!!!!!!!!!! Сделаешь одно ,летит другое (((((((((((((
 

searchingman

Гуру
Местный
Спасибо ! Но ..... увеличивается и расстояние между блоками категорий на витрине категорий и магазина. Я с этим уже 5 часов бъюсь !!!!!!!!!!! Сделаешь одно ,летит другое (((((((((((((
Про какое расстояние идет речь? Покажите на примере на своем сайте после применения вышеуказанных стилей.
 
Почему то задаваемая высота для блока товара , используется и для блока категории
 

Вложения

  • скрин_стало1.jpg
    скрин_стало1.jpg
    73.5 KB · Просмотры: 49
  • Должно_быть_так1.jpg
    Должно_быть_так1.jpg
    81.2 KB · Просмотры: 46

searchingman

Гуру
Местный
Почему то задаваемая высота для блока товара , используется и для блока категории
Вместо
.woocommerce li.product {
height: 355px; /* указать свою ширину */
}
используйте
.woocommerce-page li.type-product {
height: 355px;
}
Тогда высота будет применяться только к товарам.
 
ГРОМАДНОЕ СПАСИБО !!!!!!!!! Я уже сообразил , что .woocommerce-page а вот li.type-product я никак не мог найти. И где Вы нашли!!!!!!!!!! СПАСИБО !!!!!!!!
 
Вечер добрый ! Но к сожалению не все. Оказалось ,что при выводе товара шорткодом "klass" вывода товара другой . И заданная высота не распространяется. Так что можете представить , какая получилась картина при выводе нового товара.Но оказалось и не сложно , хотя немножко попотел .
Необходимо добавить
.woocommerce li.type-product {
height: 365px;
}
Ну пока все ( да я увидел откуда type-product :) )
 

ArtemZhyg

Форумчанин
1. Устанавливаем фиксированную высоту блока товара
HTML:
.woocommerce ul.products li.product {
  width: 21%;
  height: 355px; /* указать свою высоту */
}
2. Блоки с кнопкой "Добавить в корзину" и цена прижимаем к нижнему краю.
HTML:
.woocommerce ul.products li.product .price {
  position: absolute;
  bottom: 50px;
  left: 40px;
}
HTML:
.woocommerce ul.products li.product .button {
  position: absolute;
  bottom: 0;
}
Конечный результат выглядит так http://take.ms/514Bo
Все это надо вставлять в style.css темы?
 
Сверху Снизу