Кастомная карточка товара WooCommerce: как создавалась страница товара для интернет-магазина Gelikon
Карточка товара — одна из самых важных страниц любого интернет-магазина.
Именно здесь пользователь принимает решение:
- купить товар;
- добавить его в корзину;
- продолжить просмотр;
- или уйти с сайта.
В проекте Gelikon стандартная карточка WooCommerce не подходила практически полностью.
Требовалась кастомная структура, адаптация под мобильные устройства, улучшение UX и возможность гибко управлять контентом через админку.
В этой статье я покажу, как создавалась карточка товара и какие задачи пришлось решать в процессе разработки.
Почему стандартная карточка WooCommerce не подошла
По умолчанию WooCommerce предоставляет довольно универсальную структуру страницы товара.
Но для реального коммерческого проекта обычно возникают проблемы:
- слишком простая визуальная подача;
- неудобное расположение блоков;
- слабая мобильная адаптация;
- перегруженные элементы;
- отсутствие акцентов;
- неудобная работа с длинным контентом;
- ограничения по дизайну.
Кроме того, стандартная структура плохо подходит для лендингового подхода к карточке товара.
А в современных интернет-магазинах карточка товара часто работает как мини-лендинг.
Что было важно в проекте Gelikon
Основные задачи карточки товара:
- сделать страницу визуально «дороже»;
- улучшить восприятие товара;
- повысить удобство покупки;
- упростить мобильный UX;
- сохранить высокую скорость работы;
- сделать удобное наполнение через админку.
Кастомная структура страницы
Карточка товара была полностью переработана.
Вместо стандартной структуры WooCommerce использовались кастомные секции:
- галерея товара;
- блок преимуществ;
- описание;
- характеристики;
- информационные блоки;
- CTA-зоны;
- адаптивные элементы для мобильных устройств.
Кастомная галерея товара
Одна из первых задач — переработка галереи.
Стандартные галереи WooCommerce часто имеют проблемы:
- скачущая высота;
- неудобный мобильный UX;
- плохая работа с вертикальными изображениями;
- слишком маленькие превью;
- неудобная навигация.
В проекте были реализованы:
- фиксированная высота галереи;
- корректный
object-fit; - кастомные точки навигации;
- улучшенное отображение на мобильных устройствах;
- более стабильное поведение изображений.
Это позволило сделать интерфейс визуально аккуратнее и избежать «прыгающей» верстки.
Стабильная зона покупки
Очень частая проблема интернет-магазинов — скачущие кнопки покупки.
Например:
- у одного товара описание короткое;
- у другого длинное;
- кнопка «Купить» смещается;
- пользователь теряет фокус.
В Gelikon структура была сделана таким образом, чтобы:
- CTA-блок всегда оставался на видимом месте;
- кнопка покупки не прыгала;
- важные действия были визуально выделены.
Это особенно важно на мобильных устройствах.
Sticky Add To Cart для мобильных устройств и ПК
На мобильных устройствах пользователь часто пролистывает страницу полностью вниз и теряет кнопку покупки.
Поэтому был реализован отдельный sticky-блок:
- фиксированная кнопка покупки;
- отображение цены;
- адаптация под мобильный интерфейс;
- корректная работа при скролле.
Такой подход заметно улучшает UX интернет-магазина.
Блок преимуществ товара
Для повышения доверия и визуального восприятия были добавлены отдельные блоки преимуществ:
- доставка;
- гарантия;
- качество продукции;
- дополнительные условия.
Причем эти блоки проектировались так, чтобы:
- менеджер мог редактировать их через админку;
- сохранялся единый стиль сайта;
- контент не ломал верстку.
Удобная админка для наполнения
Одна из важных задач — сделать так, чтобы менеджер мог добавлять товары без риска сломать дизайн.
Для этого:
- часть Gutenberg-редактирования была ограничена;
- использовались структурированные поля;
- важные элементы были вынесены в отдельные блоки;
- продумывались ограничения длины контента;
- заранее тестировались длинные заголовки и описания.
Это помогает сохранить единый визуальный стиль интернет-магазина.
Работа с длинным контентом
В WooCommerce часто возникает проблема:
товары отличаются по объему информации.
Например:
- у одного товара 2 характеристики;
- у другого 30;
- у третьего огромный текст;
- у четвертого почти ничего нет.
Если это не учитывать заранее — интерфейс начинает ломаться.
Поэтому карточка проектировалась с учетом:
- гибких блоков;
- адаптивной сетки;
- работы с длинными заголовками;
- корректных переносов;
- стабильных отступов;
- мобильной адаптации.
Производительность
Еще одна важная задача — не перегрузить страницу.
Очень часто кастомные карточки товара начинают тормозить из-за:
- тяжелых конструкторов;
- лишних JS-библиотек;
- большого количества плагинов;
- неоптимизированных слайдеров.
В проекте делался упор на:
- кастомную верстку;
- минимизацию лишнего кода;
- контроль структуры;
- аккуратную работу с JavaScript.
Страница по Google Page Speed показывает вполне неплохие показатели и это без плагинов оптимизации по типу WP Rocket которые дают по +20 баллов по скорости
Почему кастомная карточка товара важна
Для многих интернет-магазинов карточка товара — это главный продающий экран.
Именно поэтому важно:
- не копировать типовые шаблоны;
- продумывать UX;
- адаптировать интерфейс под аудиторию;
- делать удобную мобильную версию;
- учитывать работу менеджеров;
- сохранять производительность сайта.
Итог
В проекте Gelikon карточка товара создавалась не как стандартная страница WooCommerce, а как полноценный продающий интерфейс.
Основной упор делался на:
- UX;
- адаптивность;
- визуальную подачу;
- удобство покупки;
- производительность;
- удобное управление контентом.
В следующей статье я покажу, как была реализована AJAX-корзина и мини-корзина WooCommerce без перезагрузки страницы, а также какие проблемы пришлось решать при обновлении товаров и checkout.
