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

Ограничение количества символов названия товара в категории(truncate)

techlamp

Новичок
Добрый день, Уважаемые форумчане!

Прошу посоветовать плагин или код для вставки в function.php или через стили для того, чтобы ограничить название товара по количеству символов. Необходимо для приведения http://lampa52.ru в приятный вид, где товары не пляшут.
 

techlamp

Новичок
Нашел решение через редактор стилей
.product_item .product_details h5{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Правда он режет до 1 строки. Как обрезать, чтобы отображалась 2 строки?
 

rikitiki

Специалист
Местный
Вопрос интересный. Проверил - действительно режет в одну строку. Да и с кроссбраузерностью у этого кода не ахти как.
Тоже хотел бы обрезать заголовки в витринах до двух или трёх строк. И именно с тремя точками на конце.
Заголовки из двух строк используются в магазине OBI.
Гляньте к примеру на страницу Проточные водонагреватели. этого магазина.
У всех товаров фиксированная высота при переменной ширине. За счёт этого, скорее всего медиазапросами, меняется количество колонок при различных разрешениях и сохраняется ровность строк.
Если при просмотре этой страницы уменьшать ширину браузера то изменится ширина и количество колонок, и соответственно меняется длина подрезанных заголовков. Но две строки остаются неизменными, причём с тремя точками на конце.
Вариантов подрезки много:
http://blog.n1dev.ru/html-i-css/obrezka-teksta/
Но если использовать обрезку по количеству знаков то могут возникнуть сложности в кодировке UTF8:
http://php.ru/forum/viewtopic.php?t=27083
Длина всё равно будет немного гулять. Может получиться, когда как - то две, то три строки.
Мне тоже не нравится неровный вывод товаров в Woocommerce.
И это здесь обсуждалось: https://wpcommerce.ru/threads/nastrojka-setki-tovarov.1081/
Была ещё одна тема с советами по этому вопросу, но её я отыскать не смог.
Интересен вариант с использованием jQuery dotdotdot:
Вот здесь интересное поясняюшее видео.
И сам первоисточник - http://dotdotdot.frebsite.nl/
Надо бы поробовать на досуге. Возможно с ним получится что-либо путное.
 
Последнее редактирование:

sam325

Форумчанин
Сначала в файл functions.php вашего шаблона вставьте следующую функцию:

function trim_title_chars($count, $after) {
$title = get_the_title();
if (mb_strlen($title) > $count) $title = mb_substr($title,0,$count);
else $after = '';
echo $title . $after;
}

Затем в /wp-content/plugins/woocommerce/templates/content-product.php поменяйте код, который выводит название поста — <?php the_title(); ?> — на такой:

<?php trim_title_chars(30, '...'); ?>
Здесь цифра 30 — это количество символов, до которых нужно обрезать заголовок, а ... — то, что будет стоять после обрезанного текста.
 

gluka

Новичок
Подскажите, если отсутствует название поста — <?php the_title(); ?> , но есть <?php post_class(); ? >
С этим не работает! Облазил по данной теме все возможные места!
тема Megashop!
 

igor.gayyar

Опытный
Здравствуйте.
Получается но не совсем.
<?php the_title(); ?> - находиться в карточке товара, а не в content-product.
Если добавить <?php trim_title_chars(30, '...'); ?> в content-product, то вылезает еще одно название товара т.е. их получается два ..

За вывод названия отвечает в content-product вроде это

/**
* woocommerce_shop_loop_item_title hook.
*
* @hooked woocommerce_template_loop_product_title - 10
*/
do_action( 'woocommerce_shop_loop_item_title' );


Не подскажете, что заменить нужно?
 
text-overflow: ellipsis;
Нашел решение через редактор стилей
.product_item .product_details h5{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Правда он режет до 1 строки. Как обрезать, чтобы отображалась 2 строки?

У Вас было почти правильно, замените nowrap на normal:
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;

А кол-во строк можно регулировать высотой карточки, например так:
.site-main ul.products li.product {
width: 22%;
float: left;
margin-right: 2.9%;
border: #f1f1f1 solid 0.5px;
border-radius: 3px;
height: 300px;
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
}
 

Alexandrovna

Новичок
Предложенные варианты CSS не работали, пришлось немного все же редактировать. То, как работает у меня:


1.
CSS:
.woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title
{ 
width: 100%; 
white-space: nowrap; 
text-overflow: ellipsis; 
overflow: hidden; 
display: block; }
(Обрезает до 1 строки название продукта)
2.
CSS:
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover { white-space: normal; }
(Показывает полное название при наведении мышки)

Меня такой вариант устроил, может и вам поможет.
 

Griem

Новичок
Предложенные варианты CSS не работали, пришлось немного все же редактировать. То, как работает у меня:


1.
CSS:
.woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title
{
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block; }
(Обрезает до 1 строки название продукта)
2.
CSS:
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover { white-space: normal; }
(Показывает полное название при наведении мышки)

Меня такой вариант устроил, может и вам поможет.

А может знаете, как придать этот же эффект Hover на картинки товаров? А то как-то не слишком удобно наводить именно на название..
Пробовал:
Код:
.woocommerce ul.products li.product a img
и отдельно каждый пробовал-не фурычит..
 

Alexandrovna

Новичок
А может знаете, как придать этот же эффект Hover на картинки товаров? А то как-то не слишком удобно наводить именно на название..
Пробовал:
Код:
.woocommerce ul.products li.product a img
и отдельно каждый пробовал-не фурычит..
К сожалению не подскажу. CSS не мой конек :(
 

moroevg

Новичок
Меня такой вариант устроил, может и вам поможет.
Благодарю за рабочий вариант (y)

Я его немного допилил, чтобы по наведению на карточку продукта (на титл, фото или кнопку - без разницы) - появлялся весь заголовок.

В стили темы (сам блок карточки продукта) добавил строку white-space: nowrap;
CSS:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    white-space: nowrap; 
.... тут еще другие стили
}

В конце файла стилей следующий код:

CSS:
/* показываем весь заголовок при наведении мышкой на карточку товаров */
.woocommerce-page ul.products li.product:hover {white-space: normal;}
/* обрезаем длинный заголовок в галерее товаров */
.woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title
{
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
display: block; }

Результат на фото.
 

Вложения

  • img-2020-11-15-16-16-29.png
    img-2020-11-15-16-16-29.png
    71.5 KB · Просмотры: 39

picstudio

Новичок
Предложенные варианты CSS не работали, пришлось немного все же редактировать. То, как работает у меня:


1.
CSS:
.woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title
{
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block; }
(Обрезает до 1 строки название продукта)
2.
CSS:
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover { white-space: normal; }
(Показывает полное название при наведении мышки)

Меня такой вариант устроил, может и вам поможет.
Шикарное решение!!! Спасибо!
 

Konstantine

Форумчанин
Для отображения двух строк и скрытия остального с тремя точками, я сделал себе вот такое решение:

CSS:
.woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        min-height: 44px;
    }


    .product-inner:hover .woocommerce-loop-product__title {
        display: inherit !important;
    }
 
Сверху Снизу