Решено Как выровнять кнопки добавить в корзину

[elenweb]

Всем привет! По умолчанию страница с товаром выглядит неряшливо, кнопки скачут.
Многие ищут решение и проще тем, у кого заранее известно максимальное количество строк в названии товара.
У меня не так. Может быть одна, а может пять.
Поэтому вариант установить фиксированную высоту не проходит.
Мне понравилось решение - приклеить кнопки к нижнему краю строки. Тогда ориентиром будет самая длинная фраза в строке.
Но я не программист и прошу Вашего совета - в каком файле какую строчку нужно добавить/отредактировать, помогите пожалуйста!

Спасибо!

 

[tuxfighter]

Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

 

[elenweb]

Добавляю скрины - как сейчас (лесенкой) и как нужно (подвинула в paint).
Вот ссылка: http://helenpromo.1gb.ru/shop/

 

[tuxfighter]

я тоже не программист. от слова "совсем"
а вам нужно в стили добавить:

.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
    height: 120px;
}

цифру менять в зависимости от предпочтений

 

[elenweb]

Спасибо за рекомендацию!
Но я не могу заранее задать высоту, так как количество строк очень разное, от 1 до 5.
Это не решит проблему, к сожалению

 

[tuxfighter]

задайте с запасом.

как выложите все товары - измените на оптимальное значение

 

[elenweb]

Я попробую. А в какой файл нужно внести этот код?
Пожалуйста, расскажите чуть подробнее.

 

[tuxfighter]

либо в style.css вашей дочерней темы, либо в настройках сайта: внешний вид - настройка - "дополнительные css"

 

[elenweb]

Спасибо! Это работает!

 

[Stork.71]

а если в строчке попадется 3 товара с коротким одностроковым названием - то будет большая дырка?

 

[elenweb]

Получается, будет много свободного места

 

[igor.gayyar]

Здравствуйте
А подскажите, что мне можно сделать? http://magickids.com.ua/shop/

Этот код не совсем вариант...
.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
height: 120px;
}

т.к. получается не очень красиво... расстояние уж очень большое...


да и шорткод на главной тоже "удлинился" до безобразия((


я понимаю, что 120 можно уменьшить, но все же может есть еще варианты..

 

[elenweb]

Я бы тоже хотела увидеть еще варианты. На своем сайте я задала 100px, но если имеются другие решения, попробуем и их! Откликнитесь, у кого получилось найти универсальный способ.

 

[tuxfighter]

лично я давно забил на все попытки выравнивания и вывожу товары сеткой Pinterest

 

[igor.gayyar]

Может как вариант можно сделать как на этом сайте
http://panama.ua/, чтобы кнопка появлялась при наведении на товар мышкой, только не знаю что в hover прописать нужно...

 

[rikitiki]

Обсуждалось ранее. Решения два.
Либо сделав фиксированный по высоте див заголовка с подрезкой его скриптом до двух - трёх строчек, с многоточиями на конце, чтобы было понятно, что заголовок не полный. Именно так сделано на сайте магазин Оби.
Или и ещё вариант - убрать навязчивые кнопки Добавить в корзину витринах. Неровность будет меньше бросаться в глаза. Никто не покупает товар не заглянув прежде в карточку товара. В магазине Aliiexpress 'этих кнопок в витринах нет.

 

[igor.gayyar]

А как сделать, чтобы кнопка появлялась при наведении на товар? Как по ссылке выше...

 

[rikitiki]

Можно ещё сделать как у меня

 

[igor.gayyar]

Вот про это я и говорю...
Только не знаю как реализовать это)

 

[tuxfighter]

Может как вариант можно сделать как на этом сайте
http://panama.ua/, чтобы кнопка появлялась при наведении на товар мышкой, только не знаю что в hover прописать нужно...

в обычном состоянии
visibility: collapse; или visibility: hidden;
при наведении
visibility: visible;