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

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

elenweb

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

Спасибо!
 

tuxfighter

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

elenweb

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

Вложения

  • Витрина.jpg
    Витрина.jpg
    84.6 KB · Просмотры: 122
  • Витрина_1.jpg
    Витрина_1.jpg
    84.6 KB · Просмотры: 116

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"
 

Stork.71

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

igor.gayyar

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

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

т.к. получается не очень красиво... расстояние уж очень большое...
upload_2017-1-17_15-1-8.png

да и шорткод на главной тоже "удлинился" до безобразия((
upload_2017-1-17_15-2-44.png

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

elenweb

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

tuxfighter

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

igor.gayyar

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

rikitiki

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

igor.gayyar

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

tuxfighter

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