WooCommerce — как сократить длинные названия товаров

На страницах категорий длинные названия товаров можно сократить, если это существенно не влияет на удобство пользователей. Например на сайте по продаже книг длинные названия можно сократить, так как названия дублируются на обложке книги.

Сократить до одной строки с многоточием

В настройках стилей темы изменить CSS свойства заголовка товаров:

h2.woocommerce-loop-product__title {
	white-space: nowrap; /* Отключаем перенос строк */
	overflow: hidden; /* Скрываем текст за пределами блока */
	text-overflow: ellipsis; /* Добавляем троеточие */
}

Сократить названия товаров до нескольких строк

Если предыдущий способ не подходит, можно сократить до нескольких строк. Да, мы теряем красивое троеточие. Но можем показывать полное название при наведении на карточку товара.

@media (min-width: 768px) {
	h2.woocommerce-loop-product__title {
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Покажем полное название при наведении на карточку */
	.site-main ul.products.columns-4 li.product:hover h2.woocommerce-loop-product__title {
		color: grey;
		font-size: 1em!important;
		white-space: normal;
	}

	.site-main ul.products.columns-4 li.product:hover {
		box-shadow: 0px 5px 5px #ccc;
	}
}

Обратите внимание на медиа-запрос @media (min-width: 768px) . Это означает, что данные CSS-свойства будут работать только на десктопах. На планшетах и мобильных устройствах свойство hover не должно работать, так как нет эффекта наведения мышью.