MISTY studio

Разработка интернет-магазина Plantis на WordPress и WooCommerce

PLANTIS-SHOP.RU

Интернет-магазин комнатных растений с полностью кастомной темой на WordPress и WooCommerce.

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

Перейти на сайт Обсудить похожий проект
Главный экран сайта Plantis
Тип проектаИнтернет-магазин
ПлатформаWordPress + WooCommerce
РазработкаКастомная тема
Моя рольFrontend + Backend + WooCommerce
О проекте

Интернет-магазин, который вырос далеко за рамки стандартного WooCommerce

Plantis — интернет-магазин комнатных растений с онлайн-продажами в Москве.

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

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

Функционал по страницам сайта
Каталог

Каталог, рассчитан на большой и разнородный ассортимент

Каталог Plantis — это не стандартная сетка WooCommerce. Для разных групп товаров используются собственные сценарии отображения, навигации и подбора.

Умная структура каталога

Категории, подкатегории, подборки и характеристики объединены в навигацию, которая помогает быстро перейти от общего ассортимента к конкретному типу растения.

Фильтрация по характеристикам

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

Разные сценарии для разных товаров

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

Работа с наличием

Товары в наличии, временно отсутствующие позиции и товары под заказ обрабатываются по-разному — как в каталоге, так и дальше в процессе покупки.

Интерактивные карточки

Галереи, быстрые действия, статусы товара, избранное и информация, необходимая для принятия решения, доступны непосредственно из каталога.

Каталог интернет-магазина Plantis
Карточка товара

Карточка товара, которая отвечает на вопросы до оформления заказа

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

Галерея с полноценным просмотром

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

Актуальная информация о доставке

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

Наличие и предзаказ

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

Покупка в один клик

Для покупателя, которому не нужен полный checkout, предусмотрен отдельный быстрый сценарий заказа.

Связанные товары и услуги

В зависимости от товара можно предложить подходящие дополнения — например, пересадку, кашпо или сопутствующие позиции.

Карточка товара Plantis
Корзина без перезагрузок

Корзина, которая работает как интерфейс приложения

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

Динамическое изменение количества

Стоимость заказа и связанные элементы интерфейса обновляются сразу после изменения количества.

Мини-корзина

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

Работа с ограниченными остатками

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

Дополнительные предложения

В корзине могут появляться релевантные товары и услуги в зависимости от её состава.

Корзина Plantis
Оформление заказа и доставка

Checkout под реальную логистику магазина

Стандартное оформление заказа WooCommerce было переработано под реальные процессы Plantis. Доступные варианты и стоимость получения заказа зависят от состава корзины, адреса, даты, интервала и особенностей товаров.

Доставка по Москве и за МКАД

Стоимость рассчитывается с учётом зоны доставки и особенностей заказа.

Дата и временной интервал

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

Срочная доставка

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

Особые тарифы

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

Самовывоз

Самовывоз встроен в общую систему оформления и учитывает собственные ограничения по времени и доступности.

Физические и юридические лица

Checkout адаптируется под тип покупателя и показывает только необходимые для конкретного заказа поля.

Динамический пересчёт checkout

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

Оформление заказа и доставка Plantis
SEO и товарные данные

Один каталог — один источник данных для сайта, поиска и внешних сервисов

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

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

Техническое SEO

SEO заложено в структуру магазина

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

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

SEO-логика работает вместе с динамическим ассортиментом WooCommerce: изменения товаров и категорий не требуют ручной доработки шаблонов.

Schema.org

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

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

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

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

XML / YML фиды

Один каталог — несколько внешних площадок

Ассортимент магазина можно автоматически передавать во внешние сервисы через товарные XML и YML-фиды.

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

Не просто выгрузка всех товаров

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

Это особенно важно для Plantis, где растения, крупные позиции, кашпо, системы автополива и другие группы товаров имеют разные свойства и сценарии продажи.

Автоматическое обновление

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

YML XML Яндекс Google Merchant Другие площадки
Open Graph

Корректное отображение страниц при публикации ссылок

Для страниц сайта предусмотрены Open Graph-данные, которые определяют, как ссылка выглядит в социальных сетях и мессенджерах.

Заголовок, описание и изображение формируются в соответствии с конкретной страницей или товаром, поэтому вместо случайного текста и изображения пользователь получает полноценное релевантное превью.

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

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

Это снижает объём ручной работы и позволяет развивать ассортимент, не поддерживая несколько независимых версий каталога.

Маленькие детали большого магазина

Функции, которые делают магазин удобнее

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

Умный поиск по каталогу Plantis Мега-меню каталога Plantis Избранное в интернет-магазине Plantis

Умный поиск по каталогу

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

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

Для ассортимента растений это особенно важно: у одного вида могут одновременно использоваться ботаническое, торговое и распространённое название.

Мега-меню каталога

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

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

Избранное

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

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

Управление состояниями интерфейса

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

Интерфейс не предполагает, что любой AJAX-запрос обязательно завершится успешно: пользователь получает понятную обратную связь, а элементы управления возвращаются в корректное состояние после ответа сервера.

Не только интернет-магазин

Внутри проекта есть самостоятельные продукты

За время развития Plantis внутри основного магазина появились функциональные направления, которые по объёму логики фактически стали отдельными мини-продуктами.

Подарочные карты

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

Смотреть отдельный кейс
Подарочные карты Plantis

Тест «Какое ты растение»

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

Смотреть отдельный кейс
Тест Plantis
Архитектурные решения

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

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

WooCommerce — источник состояния

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

Разделение PHP и JavaScript

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

Частичное обновление интерфейса

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

Одна модель данных — несколько каналов

Данные WooCommerce используются не только на страницах магазина, но и в Schema.org, Open Graph и товарных фидах. Это уменьшает дублирование и снижает риск расхождения цены, наличия или другой информации между каналами.

Развитие без переписывания магазина

Новые сценарии добавляются поверх существующей модели товаров и заказов. Это позволяет постепенно расширять проект — добавлять новые категории, правила продажи, интерфейсные компоненты и интеграции без необходимости заменять базовую e-commerce архитектуру.

Технологии

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

WordPress WooCommerce PHP JavaScript SCSS ACF AJAX REST / API integrations

Проект построен на кастомной WordPress-теме без визуального конструктора. Большая часть интерфейсов и бизнес-логики разработана специально для Plantis и интегрирована с экосистемой WooCommerce.

Нужен интернет-магазин со своей логикой?

Telegram WhatsApp

Если возможностей готовой темы или стандартного WooCommerce недостаточно, разработаю решение под реальные процессы вашего магазина — от интерфейса каталога до нестандартной логики заказа и интеграций.

    Имя
    Телефон / Telegram
    Опишите задачу или прикрепите ссылку
    Ответ обычно в течение рабочего дня