Разработка B2B-каталога на WooCommerce

О проекте

Не просто каталог продукции, а магазин без лишнего e-commerce слоя

В B2B-сегменте не всегда нужен сценарий «увидел товар → оплатил картой». Для сварочных материалов важнее быстро найти нужную марку, покрытие, диаметр и вес, сравнить характеристики, проверить сертификаты и понять условия поставки.

Поэтому первый этап построен как бизнес-каталог: интерфейс помогает подобрать конкретную товарную конфигурацию и передать её в коммерческий сценарий, а WooCommerce уже отвечает за товары, вариации, атрибуты, цены и товарные связи.

Такой подход оставляет возможность развивать проект дальше как полноценный интернет-магазин без переноса каталога в другую систему и без пересборки товарной модели с нуля.

Главная страница

Landing page + каталог

Главная работает как полноценный продающий лендинг

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

Первый экран сразу ведёт к заявке

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

Каталог встроен прямо в лендинг

Основные направления продукции и популярные позиции вынесены непосредственно на главную. Это позволяет использовать страницу одновременно как презентацию компании и быстрый вход в товарный каталог.

Доверие формируется по ходу страницы

Сертификаты, информация о производстве, преимущества официального дилера и реальные материалы о продукции расположены внутри общего сценария, а не спрятаны по отдельным корпоративным страницам.

Несколько точек конверсии

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

Контент работает на разные сценарии

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

Лендинг не существует отдельно от магазина

Товарные блоки используют реальные товары WooCommerce, поэтому маркетинговая главная и каталог работают поверх одной товарной базы. Обновление ассортимента не требует вручную дублировать карточки в отдельной лендинговой структуре.

Архитектура первого этапа

Каталог сразу построен на e-commerce сущностях

Вместо отдельной базы «карточек продукции» сайт использует стандартную модель WooCommerce. Даже если основной пользовательский сценарий пока ближе к B2B-каталогу, технически товары уже готовы к дальнейшему развитию продаж.

Товары и вариации WooCommerce

Марка материала хранится как товар, а комбинации диаметра, веса и других параметров — как полноценные вариации. У каждой вариации могут быть свои цена, изображение, артикул, дополнительные параметры и состояние.

Атрибуты как структура каталога

Технические параметры не зашиты в текст карточки. Они используются как структурированные данные WooCommerce: выводятся в каталоге и карточке товара, участвуют в фильтрации и связываются с выбором вариации.

Коммерческий слой можно расширять

Количество, вариации и add to cart уже работают поверх стандартных сущностей WooCommerce. Следующий этап можно сосредоточить на checkout, оплате, доставке, кабинетах и интеграциях, а не заново строить каталог.

Кастомная тема без конструктора

Интерфейс реализован собственным PHP, CSS и JavaScript. WooCommerce используется как backend и модель данных, а frontend проектируется под специфику B2B-ассортимента, а не под возможности универсальной темы.

Каталог

Подбор продукции

Каталог работает как быстрый технический фильтр

Пользователю не нужно открывать каждую позицию, чтобы понять, подходит ли материал. Ключевые характеристики и доступные варианты вынесены прямо в листинг.

AJAX-фильтрация

Категории и покрытие фильтруются без полной перезагрузки страницы. Тот же AJAX-сценарий обновляет выдачу, количество результатов, пагинацию и заголовок каталога.

Состояние сохраняется в URL

Выбранные параметры, страница и сортировка синхронизируются с query-параметрами. Каталог остаётся навигационно понятным: состояние можно сохранить, открыть повторно или передать ссылкой.

Характеристики в карточке

В product loop выводится компактная техническая сводка: марка, тип, AWS, покрытие, исполнение и применение. Дополнительная панель позволяет показать данные, не перегружая саму карточку.

Вариации прямо в выдаче

Диаметр и вес выбираются кнопками непосредственно в каталоге. Интерфейс учитывает только доступные комбинации и не предлагает пользователю несуществующий вариант.

Цена и фото меняются динамически

После выбора комбинации JavaScript находит соответствующую вариацию и обновляет цену и изображение карточки. Ссылка «Подробнее» ведёт уже с выбранными параметрами товара.

Карточка товара

Карточка превращена в конфигуратор конкретной поставки

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

Кнопки вместо select

Стандартные WooCommerce-select скрыты за собственным интерфейсом. При выборе диаметра автоматически пересчитывается доступность весов, а затем выбранные значения синхронизируются обратно с WooCommerce.

Единое состояние вариации

Смена вариации обновляет цену, SKU, изображение, данные характеристик и дополнительные интерфейсные блоки. JavaScript подписан на стандартные события WooCommerce found_variation / reset_data.

Своя галерея вариаций

Для каждой вариации можно назначить не одно изображение, а отдельную галерею. При переключении товара фронтенд пересобирает Swiper и показывает фотографии именно выбранной конфигурации.

Цена за кг и итог

Интерфейс может показывать стоимость вариации в пересчёте на килограмм и пересчитывать итог с учётом выбранного количества — полезно для продукции, где закупка сравнивается одновременно по пачке и по весу.

Заказать или задать вопрос

Помимо стандартной товарной механики предусмотрены B2B-действия: заявка на выбранную конфигурацию и отдельный сценарий консультации. В форму передаётся контекст текущего товара и вариации.

B2B-логика

Техническая часть учитывает не только товар, но и модель оптовой продажи

Для сварочных материалов важны упаковка, вес, разные уровни цены, крупные партии и документы. Эти сценарии встроены в товарную модель, а не оформлены как статичные пояснения рядом с карточкой.

Дополнительные поля вариаций

WooCommerce-вариации расширены собственными полями: диаметр, длина, еврокатушка и другие параметры можно хранить на уровне конкретной модификации и передавать на frontend через variation JSON.

Собственная ценовая модель

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

Паллетная поставка

Для крупных закупок реализован отдельный сценарий паллеты. Блок связан с выбранной вариацией и ценой, а заявка получает контекст конкретного товара вместо обезличенного сообщения «интересует опт».

Документы в товаре

Сертификаты и другие документы выводятся отдельным табом из ACF. Пользователь может посмотреть документ и скачать исходный файл прямо из карточки продукции.

Инструкции по подбору

Для разных товарных групп подключаются свои материалы: например, шпаргалка по выбору электродов или сварочной проволоки. Это снижает порог входа в сложный технический ассортимент.

Контент и доверие

Карточка товара собирает технические данные, доказательства и продающий контент

Для B2B-каталога мало вывести название и цену. Покупателю нужны характеристики, документы, объяснение применения и подтверждение качества. Поэтому контентная часть тоже собрана как переиспользуемая система.

ACF + CPT

Переиспользуемые наборы преимуществ без копирования контента

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

Rich content

Расширенный контент хранится отдельно от основной карточки

Для сложных материалов создан отдельный CPT Rich content. В карточке выводится превью, а полный материал открывается в собственном popup-интерфейсе. Контент можно переиспользовать и не перегружать основное описание товара.

Отзывы и обзоры

Фото и видео работают как отдельный слой товарного контента

Для товара предусмотрены ACF-поля с отзывами и видеообзорами. На frontend они собираются в отдельные Swiper-блоки и позволяют показать реальное использование продукции без смешивания с техническими характеристиками.

WooCommerce tabs

Описание, характеристики, документы, оплата и доставка сведены в одну структуру

Стандартные табы WooCommerce дополнены собственными. Документы подключаются только при наличии данных, а общая информация об оплате и доставке берётся из отдельных WordPress-страниц и не дублируется вручную в каждом товаре.

В результате карточку можно развивать сразу в двух направлениях: добавлять новые технические параметры на уровне WooCommerce и усиливать контент через управляемые ACF/CPT-блоки, не переписывая шаблон под каждый товар.

Админка и данные

WooCommerce admin

Нестандартный frontend начинается с нормальной структуры данных

Вместо хранения технической логики только в JavaScript нужные данные добавлены в саму модель товара. Менеджер работает с ними в привычной админке WooCommerce.

Галерея на уровне вариации

В редактирование каждой вариации добавлен собственный media-field с мультивыбором изображений. ID сохраняются в meta и затем попадают в variation JSON.

Технические поля

Диаметр, длина, еврокатушка и товарный код могут обновлять характеристики конкретной выбранной вариации, а не оставаться общими значениями для всего товара.

Ценовые параметры

Дополнительные значения для расчёта разных уровней цены хранятся рядом с самой вариацией и проходят серверную санитизацию при сохранении.

Переиспользуемые сущности

Наборы преимуществ и rich content оформлены отдельными CPT. Для удобства контент-менеджера в админке предусмотрено их дублирование вместе с мета-данными ACF.

Готовность к следующему этапу

Из бизнес-каталога можно расти в интернет-магазин без смены фундамента

Самое важное решение первого этапа — не внешний вид каталога, а выбор правильной модели данных. Товарные сущности уже живут в WooCommerce, поэтому развитие e-commerce становится продолжением проекта, а не новой разработкой с нуля.

Каталог уже готов

Товары, категории, атрибуты, вариации, цены, изображения и технические характеристики не нужно переносить в e-commerce систему — они изначально находятся в ней.

Можно наращивать checkout

Следующий этап может включать более сложное оформление заказа, юридических лиц, способы оплаты, доставку и автоматизацию коммерческих условий поверх уже существующей WooCommerce-модели.

Можно подключать внешние системы

Поскольку товары и заказы остаются стандартными сущностями WooCommerce, проект можно дальше связывать с CRM, учётной системой, фидами, аналитикой и другими сервисами без создания параллельного каталога.

Frontend не ограничивает развитие

Тема разделена на отдельные CSS/JS-модули и WooCommerce-функции. Новые сценарии можно добавлять точечно — каталог, карточку товара, формы, корзину или checkout — не переписывая весь интерфейс.

Технологии

Что под капотом

WordPress WooCommerce PHP JavaScript AJAX ACF Custom Product Variations Custom Variation Gallery Swiper Contact Form 7 Yoast SEO Custom Theme

Проект построен как кастомная WooCommerce-тема с модульной PHP-, CSS- и JavaScript-архитектурой. WooCommerce хранит товарное состояние, PHP формирует данные и бизнес-правила, а JavaScript отвечает за динамический выбор вариаций, AJAX-каталог и синхронизацию интерфейса.

Нужен каталог, который можно дорастить до магазина?

Telegram WhatsApp

Можно начать с B2B-каталога на WooCommerce: сразу правильно собрать товары, вариации, характеристики и интерфейс подбора, а корзину, checkout, оплату и интеграции развивать следующим этапом без пересборки проекта с нуля.

Разработка B2B-каталога Zortin на WordPress и WooCommerce