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

[Юрий Николаевич]

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

 

[rikitiki]

Так чего на одном уровне выводить? Непонятно. Если ценник и кнопку в корзину, то гляньте через файербаг, как сделано в этой приятной темке:
http://themes.fruitfulcode.com/fruitful/shop/

 

[Юрий Николаевич]

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

 

[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]

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

 

[Юрий Николаевич]

Тема wordpress customizr. Подскажите

 

[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
Давайте ссылку на страницу вашего сайта с товарами, подскажу.

 

[Юрий Николаевич]

http://e-centre.com.ua/cat/stroismes/

 

[searchingman]

http://e-centre.com.ua/cat/stroismes/

1. Устанавливаем фиксированную высоту блока товара

.woocommerce ul.products li.product {
  width: 21%;
  height: 355px; /* указать свою высоту */
}

2. Блоки с кнопкой "Добавить в корзину" и цена прижимаем к нижнему краю.

.woocommerce ul.products li.product .price {
  position: absolute;
  bottom: 50px;
  left: 40px;
}

.woocommerce ul.products li.product .button {
  position: absolute;
  bottom: 0;
}

Конечный результат выглядит так http://take.ms/514Bo

 

[Юрий Николаевич]

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

 

[searchingman]

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

Про какое расстояние идет речь? Покажите на примере на своем сайте после применения вышеуказанных стилей.

 

[Юрий Николаевич]

Почему то задаваемая высота для блока товара , используется и для блока категории

 

[searchingman]

Почему то задаваемая высота для блока товара , используется и для блока категории

Вместо
.woocommerce li.product {
height: 355px; /* указать свою ширину */
}
используйте
.woocommerce-page li.type-product {
height: 355px;
}
Тогда высота будет применяться только к товарам.

 

[Юрий Николаевич]

ГРОМАДНОЕ СПАСИБО !!!!!!!!! Я уже сообразил , что .woocommerce-page а вот li.type-product я никак не мог найти. И где Вы нашли!!!!!!!!!! СПАСИБО !!!!!!!!

 

[rikitiki]

http://e-centre.com.ua/cat/stroismes/

Поправьте пожалуйста - там при разрешении менее 768px ширина 48% должна быть.

 

[Юрий Николаевич]

Спасибо за подсказку ! А где подправить ???

 

[Юрий Николаевич]

Rikitiki спасибо Вам , не один раз выручаете великолепными ответами.СПАСИБО!

 

[Юрий Николаевич]

Вечер добрый ! Но к сожалению не все. Оказалось ,что при выводе товара шорткодом "klass" вывода товара другой . И заданная высота не распространяется. Так что можете представить , какая получилась картина при выводе нового товара.Но оказалось и не сложно , хотя немножко попотел .
Необходимо добавить
.woocommerce li.type-product {
height: 365px;
}
Ну пока все ( да я увидел откуда type-product )

 

[ArtemZhyg]

1. Устанавливаем фиксированную высоту блока товара

.woocommerce ul.products li.product {
  width: 21%;
  height: 355px; /* указать свою высоту */
}

2. Блоки с кнопкой "Добавить в корзину" и цена прижимаем к нижнему краю.

.woocommerce ul.products li.product .price {
  position: absolute;
  bottom: 50px;
  left: 40px;
}

.woocommerce ul.products li.product .button {
  position: absolute;
  bottom: 0;
}

Конечный результат выглядит так http://take.ms/514Bo

Все это надо вставлять в style.css темы?