Заголовок товара WooCommerce: как красиво сократить длинные названия без потери SEO
Здравствуйте, на связи Фёдор Васильев, я специалист по WordPress. Заголовок товара WooCommerce нередко получается слишком длинным, особенно если интернет-магазин выгружает названия из 1С, прайсов поставщиков или маркетплейсов. В итоге карточка товара выглядит тяжеловесно, а на мобильных устройствах длинное название может занимать слишком много места. Поэтому в этом видео уроке я разобрал свой плагин, который помогает аккуратно сократить длинный заголовок, показать пользователю подпись «ЕЩЕ» и раскрывать полное название по клику.
Причём решение работает не только для шаблона товара через Elementor и Woodmart, но и для классического заголовка WooCommerce. Это удобно, потому что один и тот же инструмент можно использовать в разных типах магазинов. Однако важно сделать всё правильно, чтобы не навредить интерфейсу, не запутать клиента и не создать проблем для SEO.
Заголовок товара WooCommerce: зачем вообще сокращать длинные названия
На практике длинные названия товаров встречаются очень часто. Например, поставщик может передавать в карточку сразу бренд, модель, серию, модификацию, цвет, объём памяти и дополнительные характеристики. С одной стороны, это полезно. С другой стороны, такой Заголовок товара WooCommerce может занимать несколько строк и ломать аккуратную визуальную структуру страницы.
Особенно это заметно на смартфонах. Во-первых, пользователь видит слишком массивную шапку карточки. Во-вторых, цена, кнопка покупки, вариации и другие важные элементы уходят ниже. В-третьих, страница начинает восприниматься тяжелее. Поэтому логично сначала показать укороченный вариант, а полный текст раскрывать только тогда, когда человек сам этого хочет.
Именно под такую задачу и был сделан данный плагин. Он помогает сократить длинный заголовок без грубых костылей в шаблоне, без правок темы и без ручного редактирования кода каждой карточки товара.
Что умеет плагин для заголовка товара WooCommerce
Функционал у плагина прикладной и понятный. То есть он не перегружен лишними опциями, зато решает реальную задачу интернет-магазина.
- Ограничивает количество символов в заголовке товара.
- Добавляет текст после обрезки, например ….
- Показывает слово ЕЩЕ в свернутом виде.
- Раскрывает полный заголовок по клику.
- Поддерживает виджет заголовка товара в Woodmart через Elementor.
- Поддерживает стандартный классический заголовок WooCommerce.
- Позволяет задавать hover-цвет для слова ЕЩЕ.
- Для классического режима имеет отдельную страницу настроек в админке WordPress.
Кроме того, настройки для Elementor встроены прямо в сам виджет заголовка товара. Это очень удобно, потому что всё настраивается локально для нужного шаблона. А для классического режима настройки вынесены отдельно в админку, и это тоже логично. Таким образом, один плагин решает сразу две задачи.
Требования плагина: PHP, WordPress, WooCommerce, Elementor, Woodmart
- WordPress: от версии 6.0 и выше
- PHP: от версии 7.4 и выше
- Текущая версия плагина: 1.5.5
Эти значения зашиты в шапке плагина напрямую. Поэтому если на сайте WordPress старее 6.0 или PHP ниже 7.4, ставить такой инструмент уже не стоит. Лучше сначала обновить среду, а уже потом подключать дополнительный функционал.
Что нужно для работы с WooCommerce
Плагин рассчитан именно на карточку товара WooCommerce. Следовательно, для его работы нужен активный WooCommerce и страница товара. В коде используется проверка товарной страницы, поэтому без WooCommerce его основной сценарий просто не нужен.
При этом отдельная минимальная версия WooCommerce в шапке плагина жёстко не прописана. Иначе говоря, обязательная цифра там не задана. Но сам плагин ориентирован на обычный заголовок товара h1.product_title и на стандартную структуру карточки товара WooCommerce.
Что нужно для Elementor и Woodmart
Если ты используешь шаблон товара через Elementor, тогда плагин работает с виджетом Woodmart wd_single_product_title. Это значит, что для такого режима нужен:
- активный Elementor;
- тема Woodmart;
- шаблон товара, где используется виджет заголовка товара Woodmart.
Отдельная минимальная версия Elementor в шапке плагина тоже не прописана. Однако логика завязана именно на контролы Elementor и на конкретный виджет Woodmart. Поэтому, если у тебя нестандартная сборка или кастомный шаблон без этого виджета, настраивать нужно будет уже другой режим — классический WooCommerce.
Как работает заголовок товара WooCommerce в Elementor
В режиме Elementor всё сделано максимально удобно. Открываешь нужный виджет заголовка товара, переходишь во вкладку стилей и видишь дополнительный блок настроек. Там можно включить ограничение, указать количество символов, задать текст после обрезки и выбрать цвет слова ЕЩЕ при наведении.
Это удобно, потому что настройки относятся именно к нужному шаблону. Например, для одного шаблона карточки ты можешь поставить 70 символов, а для другого — 90. Кроме того, не приходится лезть в functions.php или править шаблоны темы. Всё делается через интерфейс Elementor, а это ускоряет работу и делает настройку понятной даже спустя время.
Как работает заголовок товара WooCommerce в классическом режиме
Если магазин собран без Elementor-шаблона товара, плагин всё равно остаётся полезным. В этом случае для него предусмотрена отдельная страница настроек в админке:
Настройки → Fedor Woo Заголовок
Там можно включить сокращение для стандартного заголовка WooCommerce и задать основные параметры. Причём для цвета слова ЕЩЕ используется стандартный WordPress Color Picker, а это уже удобно и привычно. Поэтому даже в классическом шаблоне можно быстро получить аккуратное и управляемое поведение длинного заголовка.
Не повредит ли заголовок товара WooCommerce поисковому продвижению
Это один из самых частых вопросов, и он вполне логичный. На мой взгляд, если всё реализовано корректно, то такой Заголовок товара WooCommerce не должен вредить SEO. Почему? Потому что речь идёт не о скрытом спам-тексте, а о нормальном UX-решении для длинного названия товара.
Поисковым системам важно понимать страницу и её содержимое. Если полный заголовок сохраняется в коде страницы, а пользователь просто сначала видит сокращённую форму, то это не выглядит как попытка обмануть поиск. Наоборот, это улучшает восприятие страницы. Особенно на мобильных устройствах, где длинные названия действительно могут мешать.
Однако есть важный нюанс. Не нужно превращать сокращение заголовка в агрессивную маскировку контента. То есть заголовок должен оставаться логичным, полным и доступным после клика. Тогда это будет именно улучшение интерфейса, а не сомнительный трюк.
Кому подойдёт этот плагин
Прежде всего, этот плагин подойдёт магазинам с длинными товарными названиями. Например:
- магазинам электроники;
- сайтам с автозапчастями;
- каталогам инструмента и оборудования;
- магазинам, где названия товаров приходят из выгрузки;
- проектам на WooCommerce с темой Woodmart и Elementor;
- классическим магазинам на WooCommerce без конструктора карточки товара.
То есть решение получилось универсальным. И это хорошо, потому что не все сайты сегодня собираются одинаково. Где-то стоит Elementor, а где-то используется обычная классическая схема WooCommerce. Поэтому плагин закрывает задачу сразу в двух сценариях.
Почему я решил сделать такой плагин
В этом видео уроке я показываю не абстрактную теорию, а вполне реальную задачу, которая встречается в магазинах постоянно. Когда работаешь с WordPress и WooCommerce много лет, начинаешь видеть повторяющиеся проблемы. Длинный заголовок товара — как раз одна из них.
Сначала кажется, что это мелочь. Однако потом выясняется, что из-за одной такой мелочи карточка товара становится тяжелее, мобильная версия выглядит слабее, а клиенту неудобно просматривать страницу. Поэтому я решил сделать аккуратный и понятный инструмент, который решает эту задачу без лишней перегрузки.
Итоги
Заголовок товара WooCommerce можно сделать аккуратнее, короче и удобнее для пользователя, не переписывая шаблон вручную. Если у тебя магазин на Woodmart и Elementor, плагин встраивается прямо в виджет заголовка товара. Если сайт работает на классическом WooCommerce, тогда используется отдельная страница настроек в админке.
В результате ты получаешь более чистый интерфейс, удобную карточку товара и гибкую настройку поведения длинных названий. А в самом видео уроке я показываю, как работает этот плагин, где находятся настройки и как всё это применять на реальном сайте.
Плагин получился действительно полезным для магазинов, где слишком длинные названия товаров портят внешний вид карточки. Мне нравится, что решение работает и для Elementor с Woodmart, и для классического WooCommerce. Это делает плагин универсальнее и практичнее. Если у вас будут идеи, замечания или предложения по улучшению, ваши пожелания на доработку и улучшения плагина оставляйте в комментариях.
Оставьте комментарий, чтобы увидеть скрытый контент. Обязательно поставьте птичку - Сохранить моё имя, email сайта в этом браузере. Модерация комментариев в среднем 2-3 часа.
(Минимальная длина комментария: 20 символов.)