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

Настройка сетки товаров

MrAlex

Новичок
Здравствуйте. Столкнулся с такой проблемой, что не могу найти, как настроить сетку товаров. Из-за разницы в длинне назаваний товаров кнопка "Добавить в корзину" смещается вниз у элементов с длинным названием и остается на месте у элементов с коротким. Получается очень некрасивая "лесенка". Я уверен, что с этой проблемой сталкивались многие. Прошу помощи в решении этой проблемы. Заранее огромное спасибо :)
05aeb558d3f7.png
 

Labunsky

Специалист
Местный
Может попробовать использовать краткое описание товара, ~120-130 знаков (с пробелом).

04_upsell.png
 
Последнее редактирование:

MrAlex

Новичок
Большое спасибо за предложенный вариант, но он к сожалению мне не подходит. Как мне кажется, должно быть какое-то решение со стороны кода.
 

redjek

Опытный
Местный
Большое спасибо за предложенный вариант, но он к сожалению мне не подходит. Как мне кажется, должно быть какое-то решение со стороны кода.
это конечно ооочень индивидуально, для каждых тем, Но в свое время решил просто, в заголовок добавлять <br>&nbsp;
Тоесть, смотрите какой самый длинный заголовок, например на 4 строчки, значит в самый короткий, надо вставить 3 раза <br>&nbsp;
Это просто если товаров несколько десятков, а вот если пара тысяч,.. тут надо уж думать чтото другое =)
 

MrAlex

Новичок
У меня товаров не так много и из всех варинатов решения ваш наиболее простой. Спасибо!
 

redjek

Опытный
Местный
У меня товаров не так много и из всех варинатов решения ваш наиболее простой. Спасибо!
Кстати, есть еще вариант, но опать же, это сугубо индивидуально для каждой темы темы,
в редакторе стилей найти стиль заголовка( Например .products .product-title или .product_item), и установить ему высоту height: 50px;
 

MrAlex

Новичок
Опробую ваш метод и отпишусь. Сегодня обнаружил, что при использовании <br>&nbsp; сетка хорошо выглядит в десктопной версии, но ломается в планшетной и мобильной версии сайта
 

MrAlex

Новичок
Проблема решилась путем добавления в style.css дочерний темы следующего кода:
Код:
ul.products li.product h3 {height: 70px; line-height: 20px}
 

Grollem

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

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

idev.bot

Новичок
привет!!! подскажите для чайника по подробнее как решить проблему
 

prandros

Новичок
Чтобы Вам подсказать, Вы должны подробнее описать проблему и привести ссылку на "проблемную" страницу.
Можете мне подсказать?
http://themify.me/demo/themes/ultra/shop/
Вот работаю с этим шаблоном,если нужно могу файлы дать!
Как вывести товары ровно?
 

rikitiki

Специалист
Местный
Всё на весь экран - пример выравнивания. На широкоформатном мониторе 1920х1080px получилось аж девять колонок. :)
 
Последнее редактирование:

-Vladislav-

Опытный
Местный
- ограничить только одной строкой с троеточием (селектор может отличаться):
Код:
// Этот CSS также добавляет троеточие ... в конце каждого заголовка товара

.woocommerce ul.products li.product h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

- ограничить заданным количеством символов:
Код:
// Примечание: этот простой код PHP можно поместить в свой файл functions.php темы

add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );

function shorten_woo_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return substr( $title, 0, 15 ); // измените последнее значение на нужное вам количество символов
} else {
return $title;
}
}

Использовал у себя первый вариант, вариант с количеством символов не решил проблему - на разных девайсах не угадать сколько строк будет.

источник: wpincode.com/kak-ukorotit-zagolovki-tovarov-v-woocommerce/
 
  • Like
Реакции: qwer

rikitiki

Специалист
Местный
- ограничить заданным количеством символов:
Второй вариант на php вообще не подходит, так как подрезка должна осуществляться браузером.
Есть ещё вариант на jQuery, типа dotdotdot.
http://dotdotdot.frebsite.nl/
Сейчас специально установил js скрипт, настроенный на подрезку в две строки с троеточием, в пример выше.
Когда товара мало, то скрипт справляется, хотя видно что режет с запозданием
http://innka.info/shirokoformatnaya-vitrina-woocommerce/
Но когда товара на странице много, то скрипт не успевает всё просчитать.
http://innka.info/vsyo-na-ves-ekran/
В моём Файерфоксе через некоторое время останавливается и пишет "Сценарий не отвечает". При этом часть товара внизу остаётся с неподрезанным текстом. Chrome и Opera кое-как справляются и со значительным запозданием доводят сценарий до конца.
Пересчёт возобновляется, если изменить ширину окна браузера. Скрипт вновь пересчитывает количество знаков под новую ширину.
 
Последнее редактирование:

intman

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

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

А что здесь имеется ввиду под термином <div ваш родительский блок> ?
 

intman

Форумчанин
Сверху Снизу