Отправляешь человеку ссылку на мебельный сайт. Он должен найти кровать, выбрать размер и понять цену. А сначала разбирается, где каталог, какой размер относится к матрасу и сколько будет стоить нужная комплектация.
С WebMebel мы прошли весь этот маршрут заново: от главной и категорий до комплектации, корзины и оформления. Сохранили существующий магазин на WordPress и WooCommerce, товары и их параметры. Новый интерфейс собрали в собственном плагине. По дороге пришлось исправить и неприятную проблему с добавлением товара в корзину.
Мы работаем в мебельной сфере с несколькими партнёрами и большим числом сайтов. Здесь разбираю один конкретный проект — WebMebel, производителя мебели из Мурома. Что меняли, почему некоторые решения переделывали ещё раз и чем проверяли результат.
С какой задачей начали
У WebMebel уже были ассортимент, фотографии изделий, размеры, варианты древесины и отделки, доставка и действующий механизм заказа. Переносить всё на другую платформу ради нового оформления не требовалось.
Но старый интерфейс заставлял разбираться сразу во многом. Деревянная текстура в шапке, два ряда навигации, крупный логотип, контакты и дополнительные элементы занимали заметную часть экрана. В категории до самих моделей нужно было пройти ещё и блок подкатегорий. В карточке товара выбор размера, основания, ящиков и дерева выглядел как набор полей с разной логикой расположения.
Задача была в том, чтобы покупатель понимал следующий шаг: нашёл тип мебели → выбрал модель → собрал комплектацию → проверил цену → оставил заказ. При этом магазин должен был продолжать работать по мере обновления отдельных страниц.
Старые скриншоты в этом кейсе сделаны перед переделкой соответствующих разделов, в разные дни. Это не единый скриншот всего сайта до начала работ. Новые скриншоты сделаны 20 октября 2026 года после доработок каталога и выбора ткани. Для корзины сравниваем её пустое состояние до и после обновления. Цены на изображениях относятся к дате скриншота, условия конкретного заказа нужно уточнять у продавца.
Сначала выбрали направление, потом стали менять страницы
До внедрения подготовили три направления главной: «Спокойный дом», «Мастерская массива» и «Удобный выбор». Выбрали второе — «Мастерская массива». Сначала договорились обновить только главную.
В основе оформления — кремовый фон, тёмно-зелёные поля, медный акцент, крупные заголовки и фотографии мебели. Хотелось показать изделия и производство без деревянной текстуры вокруг каждого элемента.
Отдельно работали с существующими фотографиями: светом, цветом, деталями и подготовкой облегчённых WebP-версий. Оригиналы сохраняли. Но здесь есть тонкость: на старом скриншоте карточки «Крид W» фотография уже обработана. Поэтому сравнение этой карточки ниже показывает изменение интерфейса, а не результат обработки фотографии.
После первого внедрения увеличили мелкие шрифты. Красивый экран, который приходится читать с прищуром, для выбора мебели подходит плохо.
Почему новую главную пришлось упростить ещё раз
Появление нового дизайна не завершило работу над главной. Когда её начали рассматривать как страницу, которую отправляют покупателям, стало видно: путь к ассортименту всё ещё длинноват. Сначала смотрим оформление, потом ищем мебель.
Мы сохранили выбранный характер и расчистили структуру. Выше подняли основные категории, добавили поиск по названию модели, показали конкретные изделия с ценами. Рядом оставили короткие переходы к материалам, доставке и выполненным работам.
Убрали повторяющиеся фотографии, подборку без цен, отдельную полосу повторных преимуществ и вопросы, ответы на которые уже были в других разделах. Ассортимент при этом не сокращали. Основные категории доступны сразу, остальные — через раскрытие.
Поиск работает обычной формой: человек вводит название и переходит к результатам. Для этой задачи не понадобился отдельный эффектный интерфейс с собственной логикой поиска.
При повторной сборке 19 октября высота главной на экране шириной 390 пикселей уменьшилась с 8 638 до 5 214 пикселей — примерно на 40%. Это сравнение первой уже обновлённой главной с её упрощённым вариантом. Речь о длине страницы, а не о скорости загрузки или росте конверсии. Польза решения в том, что в структуре осталось меньше повторов и промежуточных блоков.
Категории: сначала сравнить модели, затем выбирать параметры
Для категорий важно было перестать смешивать два разных действия. Сначала покупатель сравнивает модели. Потом, открыв подходящую, выбирает её комплектацию.
На этапе основного обновления привели к общей структуре 28 категорий и подкатегорий. Добавили поиск по модели, сортировку и фильтры по доступным для раздела параметрам: размеру, породе дерева, бюджету, скидке. На телефоне фильтры сворачиваются, чтобы не отодвигать товары ещё дальше. На странице показывается до 12 моделей; переход между страницами сохраняет условия выбора.
Карточки внутри категории тоже прошли через уточнение. Сначала вывели под фотографиями параметры и подпись о доступности заказа. Затем убрали их по результатам просмотра. Оставили фотографию, название, цену и переход к выбору размера и отделки.
Когда рядом стоят несколько кроватей, длинные списки под каждой мешают сравнивать сами модели. А выбрать древесину, цвет и основание всё равно нужно с учётом возможностей конкретного изделия. Это действие осталось внутри карточки товара.
После основной сборки ещё раз уточнили навигацию. Подкатегории сделали заметными кнопками со стрелками и выделением текущего раздела. Добавили «С мягкой спинкой»: на 20 октября в ней 17 подходящих моделей. Прежние назначения товаров по категориям сохранили.
В общем каталоге установили порядок основных разделов: кровати, матрасы, тумбы, комоды, шкафы, столы и мебель под старину. Для этих разделов подготовили единую серию интерьерных изображений на основе реальных моделей WebMebel. Это оформление входов в категории; фотографии самих товаров в карточках при этой доработке не заменяли.
Цену в категории обозначили как базовую. Это существенно для мебели: одинаковая модель в другом размере, дереве или с дополнительным механизмом может стоить иначе. Человек должен увидеть это условие до перехода к заказу.
Карточка товара: собрать комплектацию и понять, за что платишь
В карточке покупатель уже выбрал модель. Теперь нужно определить её комплектацию. Для кровати это размер спального места, древесина, отделка, основание и, если предусмотрено, хранение. Просто выстроить эти поля в столбик недостаточно: нужны понятный порядок и пояснения к местам, где легко ошибиться.
Сделали крупную фотографию с галереей, последовательный выбор параметров и блок итоговой комплектации рядом с добавлением в корзину. На компьютере фотография остаётся рядом во время настройки в пределах соответствующего блока. На телефоне содержание идёт последовательно.
Перед публикацией кейса доработали просмотр фотографий. Вместо открытия новой вкладки нажатие показывает оригинал поверх карточки: можно перейти к следующей фотографии, увеличить детали и вернуться к выбору параметров. Закрытие возвращает на прежнее место; выбранная комплектация сохраняется.
Отдельно развели размер спального места и внешние габариты. «160×200» — ещё не ответ на вопрос, поместится ли кровать в комнату. Это размер под матрас; сама кровать больше. В интерфейсе появились пояснение и отображение габаритов на основе имеющихся данных товара.
Порода дерева и цвет тоже разделены. Сосна, берёза, бук или дуб — материал. Лак, эмаль и оттенки отделки — другой выбор. Дополнительные опции снабдили пояснениями и схемами, чтобы названия оснований и механизмов не оставались загадкой. Схемы объясняют принцип, а конструкцию и совместимость нужно смотреть для конкретной модели.
С палитрой была отдельная итерация. Первоначально цветовые плитки занимали слишком много места. Попытка решить это скрытием блока оказалась неудачной: выбирать цвет стало сложнее. В итоге уменьшили сами образцы и подписи, а доступные цвета оставили открытыми. Дополнительный справочник со схемами сделали раскрываемым — он нужен не каждому при каждом заказе.
Для моделей с настроенной тканью сделали другой интерфейс: компактная кнопка показывает текущий выбор, а крупные образцы открываются в отдельном окне. В нём есть поиск по названию или номеру, увеличение, подтверждение и отмена. Пока выбор не подтверждён, его можно отменить и сохранить прежнюю ткань.
Эту доработку применили к шести карточкам, где уже был настроен выбор ткани. Использовали существующие изображения, значения и доплаты. Новые коллекции и цены для остальных товаров не придумывали. При отключённом JavaScript остаётся штатное поле выбора.
Схему ортопедического основания тоже уточнили: она показывает отдельную металлическую раму с ламелями, центральной опорой и собственными ножками. Так пояснение ближе к тому, какой вариант покупатель выбирает в комплектации.
Итоговая цена обновляется с учётом параметров. Рядом видно, что именно выбрано: размер, дерево, отделка и дополнительные опции. Сами товары, данные и расчёты остались в WooCommerce и действующем модуле опций. Второй независимый калькулятор ради красивого блока не создавали.
Отдельно исправляли отображение старой и текущей цены: стили прежней темы делали вложенные суммы слишком крупными, из-за чего цены могли выглядеть одинаково или пересекаться. Здесь меняли подачу, а не формулу стоимости. Текущая цена стала главным ориентиром, зачёркнутая — второстепенной.
После добавления товара появилась заметная обратная связь: сообщение «Добавлено в корзину», ссылка на оформление и счётчик товаров. Нажатие должно иметь понятный результат на экране.
Материалы: превратить общую картинку в инструмент выбора
На странице материалов уже были нужные образцы. Задача состояла в том, чтобы их можно было рассмотреть, назвать и обсудить с менеджером.
Большие составные изображения разделили на отдельные образцы отделки и пород древесины. Для Velutto сохранили 56 пронумерованных образцов, добавили поиск по номеру и увеличение. Названия и номера стали обычным текстом рядом с изображениями.
Так у покупателя появляется точная формулировка для разговора: модель, название отделки или номер ткани. При этом экран не превратился в эталон цвета: на странице прямо сказано, что освещение и устройство могут менять оттенок, а сочетание нужно подтвердить для выбранной модели.
Аналогично разобрали изображение вариантов хранения: ящики на колёсиках, ящики с механизмом выдвижения и подъёмный механизм. Фотографии сохранили, а подписи и пояснения вынесли в читаемый текст. Их стало проще сопоставлять с опциями товара.
Доставка: разделить перевозку, занос и сборку
Для доставки пересобрали навигацию по условиям: способы получения, выбор города и тариф, полная таблица, отправка транспортной компанией, оплата и дополнительные работы.
Стоимость доставки до подъезда не включает занос и сборку. Эти услуги выделены отдельно. Условия для нестандартного адреса или города нужно согласовать с менеджером.
Существующие тарифы не пересчитывали ради редизайна. Изменили способ их поиска и объяснения. И не стали придумывать общий срок изготовления для всех моделей: он зависит от заказа.
Неприятный эпизод: после изменений перестал проходить заказ
В процессе обновления возникла проблема, которую нельзя было закрыть новой картинкой. После изменений я сообщил, что товар перестал добавляться в корзину и нельзя оставить заказ. Отдельно проверяли «Тахту Генрих».
При разборе исправили выбор обязательного цвета: первый вариант, «Лак», теперь выбирается по умолчанию. Покупателю не нужно заново выбирать уже подходящий стандартный цвет, чтобы форма считалась заполненной.
Проверка оформления выявила и другие препятствия: скрытое обязательное поле города, сброс введённых данных при пересчёте и недоступный способ оплаты при самовывозе. Исправляли их отдельно. Не сводили все симптомы к одной кнопке.
После этого закрепили правило: перед выпуском и после него проверять путь гостевого покупателя целиком, причём с переходами между обновлёнными и оставшимися старыми страницами. Товар с платными опциями, актуальная сумма, добавление, сохранение корзины, изменение количества, доставка, поля и удаление.
Это вполне практический урок проекта. Если после переделки главной покупателю стало проще найти товар, а оформить его не получается, работу надо продолжать.
Корзина и оформление: проверить заказ до отправки
Следующим этапом обновили саму корзину и оформление. В составе заказа видны товар, выбранные параметры, количество и стоимость. Ниже — данные покупателя, получение и итог. На компьютере данные и сводка располагаются рядом, на телефоне идут одним потоком.
Сохранили штатные механизмы WooCommerce для корзины и оформления: серверную проверку обязательных полей, пересчёт и существующие способы оплаты. Новый внешний вид не должен был создавать второй, отдельный от магазина процесс заказа.
По отдельной просьбе добавили фразу: «После заказа менеджер свяжется с вами для уточнения деталей заказа и доставки». Она объясняет реальный следующий шаг. Для мебели с вариантами комплектации важно заранее обозначить, что отправка формы не заменяет согласование всех деталей.
В проверках меняли количество, удаляли товар, переключали получение и проверяли сохранение данных. При этом настоящий заказ и банковский платёж ради тестирования не создавали. Заполненный запрос оформления перехватывали до отправки на сервер.
Про причины потерь на этом этапе отдельно писал в статье о том, как разбирать брошенные корзины. В WebMebel здесь была конкретная задача: сохранить выбранную мебель и дать покупателю проверить комплектацию перед отправкой.
Довести до общего вида остальные страницы
На главной, категориях и товаре работа не закончилась. Обновили страницы для партнёров, контакты, оплату и инструкцию по заказу. У последней сохранился исторический адрес /comments/ — это именно инструкция «Как заказать мебель», несмотря на название адреса.
В контактах оставили реальные адреса и способы связи, карта загружается по запросу. Форму обратного звонка оформили в общем стиле, с видимыми подписями полей.
В галерее сохранили все 546 исходных фотографий выполненных работ. Разделили их на страницы по 18 фотографий, добавили увеличение и листание. К общему оформлению привели документы, кабинет, поиск, пустые результаты и страницу ошибки. Покупатель может попасть на них напрямую, поэтому оставлять их в прежнем оформлении было бы странно.
Всё это внедряли через собственный плагин, шаблоны и настройки. Ядро WordPress, WooCommerce и файлы действующей темы не редактировали. Исходные записи и товарные данные сохранялись. Такой подход позволил отделить изменения интерфейса от самого движка магазина.
Что проверили и какой результат можно утверждать
В отчёте основного этапа от 19 октября были зафиксированы:
- обход 469 адресов из карт сайта, меню и дополнительных состояний;
- 72 сочетания страницы и ширины, включая экраны 1440, 768, 390 и 320 пикселей;
- два отдельных гостевых сценария покупки на компьютере и телефоне: параметры, цена, корзина, количество, получение и удаление;
- сохранение исходных фотографий галереи и проверка доступности файлов;
- проверки навигации, поиска, карт, ошибок форм и пустых состояний.
После доработок 20 октября отдельно проверили новую подкатегорию, выбор ткани, схему основания и совместимость с корзиной. Для ткани проверялось и различение двух комплектаций одного товара в гостевой корзине. Это дополнительные проверки к основному этапу, а не новый замер роста продаж.
По результатам основного этапа не нашли неожиданных ошибок страниц и страниц со старым оформлением. Это результат конкретной приёмки, а не обещание отсутствия любых будущих сбоев.
Есть и границы: настоящий заказ, банковский платёж и доставку письма приёмка не подтверждала. У формы обратного звонка запросы на отправку письма перехватывали, состояния успеха и отказа моделировали. Юридические тексты сохранили, но правовую экспертизу не проводили.
Рост продаж или конверсии я к этому списку не добавляю: таких измерений в материалах проекта нет. Подтверждённый результат — обновлённый магазин с последовательным выбором модели и комплектации, новой подачей материалов и условий и проверенным в описанных сценариях путём до отправки заказа.
В этой работе показателен порядок уточнений. Выбрали направление, внедрили, увидели лишнее, убрали. Сделали выбор цвета компактнее, сохранив сами варианты. Исправили корзину и расширили проверку. Даже удачную первую версию приходится смотреть глазами человека, который пришёл выбирать мебель.
Посмотреть нынешний магазин можно на WebMebel. О работе с мебельными проектами шире рассказываю в статье про продвижение мебельного магазина.
Если у вас действующий магазин и есть ощущение, что покупателю приходится слишком многое объяснять отдельно, обсудим его путь по сайту. Начать можно с одной модели: найти её с телефона, выбрать параметры, проверить сумму и дойти до формы заказа.