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

[MrAlex]

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

 

[Labunsky]

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

 

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

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

 

[searchingman]

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

Чтобы Вам подсказать, Вы должны подробнее описать проблему и привести ссылку на "проблемную" страницу.

 

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

 

[rikitiki]

- ограничить заданным количеством символов:

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

 

[rikitiki]

Применил скрипт dotdotdot. Теперь загружается заметно быстрее и не зависает:
Всё на весь экран jQuery dotdotdot
В связи с этим написал поясняющую статью:
Woocommerce - групповое cокращение заголовков товаров с помощью скрипта dotdotdot

 

[sam325]

Смотрите решение здесь https://wpcommerce.ru/threads/ogran...-tovara-v-kategorii-truncate.1075/#post-18783

 

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

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

Если вам в меру дорог это шаблон - поменяйте его на SG Window. Там нет это проблемы вот смотрите

 

[rikitiki]

.... Там нет это проблемы вот смотрите

Если заголовки под товарами в одну строчку ужимать, так и будет всё ровно.