UX-ошибки карточки товара в WooCommerce мешают посетителю понять ценность товара и оформить заказ. В этой статье разберём 10 типовых проблем и покажем, как их исправить. Проверьте свою карточку товара по чек-листу и найдите точки роста конверсии.
Карточка товара — это место, где интерес превращается в решение о покупке. Здесь пользователь оценивает цену, характеристики, фото, доставку и условия возврата. Любая лишняя сложность создаёт сомнение.
Исследования Baymard подтверждают проблему. В 2026 году только 38% исследованных мобильных интернет-магазинов получили оценку не ниже «decent» по UX карточки товара.
Для WooCommerce ситуация особенно интересна. Платформа даёт готовую структуру товара. Но стандартный шаблон не гарантирует удобный пользовательский сценарий.
UX-ошибки карточки товара в WooCommerce: где искать проблему
Представьте типичный сценарий.
Вы столкнулись с проблемой: трафик на товар есть, но заказов мало.
Мы ищем причину: проверяем путь пользователя от фото до кнопки покупки.
Результат: находим элементы, которые создают сомнения или усложняют действие.
Обычно проблема не в одной кнопке. Она возникает из-за нескольких небольших препятствий.
Проверьте:
- понятен ли товар за несколько секунд;
- видна ли цена;
- легко ли выбрать вариант;
- понятно ли наличие;
- видны ли условия доставки;
- есть ли понятные фото;
- доступны ли отзывы;
- заметна ли кнопка покупки;
- удобно ли пользоваться страницей с телефона;
- снимает ли описание основные вопросы.
1. Нет качественных фотографий товара
Первое впечатление создаёт изображение. Поэтому плохая галерея сразу снижает доверие.
Частая ошибка — одно фото на белом фоне. Оно показывает товар, но не помогает его оценить.
Покупателю могут быть нужны:
- фото с разных ракурсов;
- крупные детали;
- товар в использовании;
- фото масштаба;
- фотографии комплектации;
- изображения разных цветов;
- видео, если оно действительно помогает.
WooCommerce поддерживает главное изображение и галерею товара. Платформа также позволяет управлять размерами и кадрированием изображений.
Что сделать: добавьте фотографии, которые отвечают на реальные вопросы покупателя.
Например, для кресла покажите его рядом с человеком. Для одежды покажите посадку. Для техники покажите разъёмы и комплект поставки.
Baymard обнаружил, что 42% участников тестов пытались определить размер товара по изображению. При этом им не хватало изображения с понятным масштабом.
2. Цена спрятана или выглядит неоднозначно
Цена должна считываться мгновенно.
Плохо работает схема:
24 990 ₽
Подробнее о цене — ниже
Ещё хуже — когда пользователь видит только скидку.
Покажите рядом:
- актуальную цену;
- старую цену при наличии скидки;
- размер скидки;
- условия акции;
- стоимость единицы товара, если это важно.
Не заставляйте человека считать выгоду самостоятельно.
Цена для вариативного товара
Если у товара несколько вариантов, цена должна обновляться после выбора.
Например:
document.addEventListener('found_variation', function () {
// WooCommerce обновляет цену выбранной вариации
// Дополнительная логика интерфейса может быть здесь
});Не стоит вручную дублировать цену в нескольких местах. Это создаёт риск рассинхронизации.
3. Непонятно, что входит в комплект
Покупатель должен понимать, за что он платит.
Представьте карточку камеры. На фотографии рядом лежат объектив, ремень и зарядное устройство. Но в описании нет информации о комплектации.
Пользователь может решить, что получает всё изображённое.
Это приводит к двум проблемам:
- человек откладывает покупку из-за сомнений;
- клиент покупает товар и получает неприятный сюрприз.
Baymard отмечает, что 44% проверенных сайтов недостаточно ясно показывали комплектные аксессуары.
Решение: создайте отдельный блок «Комплектация».
Пример:
| В комплекте | Отдельно |
|---|---|
| Основной блок | Дополнительный аккумулятор |
| Кабель USB-C | Чехол |
| Инструкция | Крепление |
Такой блок снижает количество вопросов до покупки.
4. Характеристики заменяют пользу
Список характеристик сам по себе не продаёт.
Например:
Процессор — 8 ядер
RAM — 16 ГБ
SSD — 512 ГБ
Пользователь получает цифры. Но не получает ответа на главный вопрос:
«Подходит ли мне этот товар?»
Как улучшить описание
Сначала покажите пользу. Затем дайте характеристики.
Например:
Для работы с графикой и большими проектами
Компьютер подходит для работы в Figma, Photoshop и других ресурсоёмких приложениях.
Далее:
- процессор — 8 ядер;
- оперативная память — 16 ГБ;
- SSD — 512 ГБ.
Так карточка помогает принять решение, а не просто перечисляет параметры.
5. Вариации товара неудобны
Цвет, размер, объём и комплектация часто влияют на цену и наличие.
Но интерфейс может превратить простой выбор в квест.
Проблемные варианты:
- выпадающий список из десятков значений;
- непонятные названия;
- маленькие переключатели;
- отсутствие выбранного состояния;
- варианты без наличия;
- изменение цены без визуального объяснения.
Как оформить вариации
Для небольшого числа вариантов используйте заметные переключатели.
<div class="product-options">
<span>Цвет:</span>
<button type="button" data-color="black">
Чёрный
</button>
<button type="button" data-color="white">
Белый
</button>
</div>Для цветов можно использовать визуальные swatches. Для размеров — обычные кнопки.
Главное правило: выбранный вариант должен быть очевиден.
6. Кнопка «Добавить в корзину» теряется
Покупатель уже принял решение. Теперь сайт должен помочь сделать следующий шаг.
Но кнопку часто прячут среди:
- описания;
- баннеров;
- характеристик;
- рекомендаций;
- второстепенных ссылок.
Это особенно критично на мобильном устройстве.
WooCommerce поддерживает Sticky Add-to-Cart. Такая панель остаётся доступной при прокрутке после того, как основная кнопка исчезает с экрана.
Практический подход:
- сделайте кнопку визуально заметной;
- разместите её рядом с ценой;
- показывайте выбранную вариацию;
- отображайте состояние загрузки;
- подтверждайте добавление товара;
- на мобильном рассмотрите фиксированную кнопку.
Не превращайте страницу в набор конкурирующих CTA.
7. Нет информации о доставке
«Бесплатная доставка» звучит хорошо. Но этого часто недостаточно.
Покупателю нужны конкретные ответы:
- сколько стоит доставка;
- когда привезут;
- какие способы доступны;
- есть ли самовывоз;
- зависит ли цена от региона;
- от какой суммы доставка бесплатна.
По данным Baymard, 64% пользователей активно ищут информацию о доставке на странице товара. При этом 43% проверенных сайтов не показывали там стоимость или условия доставки.
Лучше показать информацию рядом с CTA
Например:
Доставка от 490 ₽
Завтра — при заказе до 16:00.
Самовывоз бесплатно
Из пункта выдачи в вашем городе.
Конкретика снимает неопределённость лучше рекламных формулировок.
8. Условия возврата спрятаны в футере
Покупатель может сомневаться не в товаре. Он может сомневаться в последствиях покупки.
Особенно это важно для:
- одежды;
- обуви;
- дорогой техники;
- мебели;
- товаров с индивидуальными характеристиками.
Ссылка «Возврат и обмен» должна находиться рядом с товаром.
Не обязательно показывать весь юридический текст. Достаточно короткого объяснения и ссылки на подробные условия.
Например:
Возврат в течение 14 дней
Если товар не подошёл, ознакомьтесь с условиями возврата.
Baymard сообщает, что 44% проверенных сайтов не показывали информацию о возврате или ссылку на неё прямо на странице товара.
9. Отзывы есть, но ими невозможно пользоваться
Отзывы работают только тогда, когда помогают выбрать товар.
Длинная лента из 200 комментариев мало полезна без структуры.
Добавьте:
- среднюю оценку;
- количество отзывов;
- распределение оценок;
- фильтр по оценке;
- фото покупателей;
- сортировку;
- ответы магазина;
- возможность перейти к нужному отзыву.
Особенно полезны отзывы с конкретикой.
Плохо:
Хороший товар. Всё понравилось.
Лучше:
Использую третий месяц. Размер соответствует таблице. После стирки цвет не изменился.
Такой отзыв помогает принять решение.
10. Мобильная версия повторяет десктоп
Мобильная карточка товара — не уменьшенная копия компьютера.
На небольшом экране особенно заметны:
- огромные изображения;
- длинные блоки текста;
- мелкие элементы;
- горизонтальный скролл;
- неудобные вариации;
- кнопка покупки вне экрана;
- всплывающие окна.
Исследование Baymard показывает заметную разницу: только 38% исследованных мобильных ecommerce-сайтов имели уровень UX карточки товара не ниже «decent».
Минимальный мобильный чек-лист
Проверьте сценарий одной рукой:
- открыть товар;
- посмотреть фото;
- выбрать вариант;
- понять цену;
- узнать доставку;
- добавить товар;
- открыть корзину.
Если для любого действия приходится долго прокручивать страницу, интерфейс требует доработки.
Что проверить перед запуском WooCommerce-магазина
Используйте этот короткий чек-лист.
| Элемент | Вопрос |
|---|---|
| Фото | Понятно ли, как выглядит товар? |
| Цена | Видна ли актуальная стоимость? |
| Вариации | Легко ли выбрать нужный вариант? |
| Наличие | Понятно ли, можно ли купить товар? |
| CTA | Видна ли кнопка покупки? |
| Доставка | Понятны ли сроки и стоимость? |
| Возврат | Видны ли условия возврата? |
| Отзывы | Помогают ли они принять решение? |
| Описание | Отвечает ли оно на вопросы клиента? |
| Mobile UX | Удобна ли карточка на смартфоне? |
Как исправлять UX-ошибки карточки товара в WooCommerce
Не стоит сразу переделывать весь интернет-магазин.
Начните с аналитики.
Шаг 1. Найдите страницы с проблемой
Сравните:
- просмотры товара;
- добавления в корзину;
- начало оформления;
- покупки;
- конверсию;
- показатели мобильных пользователей.
Ищите товары с высоким трафиком и низким количеством добавлений.
Шаг 2. Проверьте реальные сценарии
Откройте карточку как обычный покупатель.
Попробуйте ответить:
Что это?
Сколько стоит?
Подойдёт ли мне?
Когда получу?
Можно ли вернуть?
Что входит в комплект?
Если на вопрос сложно ответить, это потенциальная UX-проблема.
Шаг 3. Исправляйте по приоритету
Начните с элементов, которые влияют на покупку:
- цена;
- фото;
- вариации;
- наличие;
- CTA;
- доставка;
- возврат;
- описание;
- отзывы;
- дополнительные рекомендации.
Когда стандартного WooCommerce уже недостаточно
WooCommerce хорошо подходит для базового интернет-магазина. Но бизнесу часто нужен индивидуальный пользовательский сценарий.
Например, вы продаёте сложное оборудование. Пользователь должен выбрать десятки параметров.
Или вы продаёте одежду. Клиенту нужен подбор размера.
Или товар имеет разные комплектации. Цена должна пересчитываться сразу.
В таких случаях готового шаблона может быть мало.
Вы столкнулись с проблемой: стандартная карточка не отражает специфику товара.
Мы решаем её: проектируем UX-сценарий, дорабатываем шаблон WooCommerce и связываем интерфейс с логикой магазина.
Результат: покупатель быстрее получает нужную информацию и совершает целевое действие.
Заключение
UX-ошибки карточки товара в WooCommerce редко выглядят критично по отдельности. Но вместе они создают трение на каждом этапе покупки.
Начните с десяти зон: фото, цена, вариации, описание, CTA, доставка, возврат, комплектация, отзывы и мобильный UX.
Если карточка уже получает трафик, не меняйте её вслепую. Проведите UX-аудит, найдите проблемные сценарии и исправьте их по приоритету.
Студия «Компьюти» помогает проектировать и дорабатывать интернет-магазины на WordPress и WooCommerce. Если покупатели заходят на страницы товаров, но не доходят до заказа, мы можем разобрать путь пользователя и предложить конкретные изменения.
