Skip to main content

Разработка интернет-магазина удобрений: WooCommerce + Elementor + интеграция СДЭК и Альфа-банка

Клиент и контекст проекта

Заказчик — российский производитель органических удобрений с собственной линейкой из 6 препаратов: активаторы роста, биодеструкторы, прилипатели, добавки для почвы и кормовая биодобавка. Компания работает на B2B и B2C рынке, отгружает продукцию по всей России, странам СНГ и за рубеж, отгрузка 24/7. На момент обращения у клиента не было полноценного интернет-магазина — нужен был сайт, через который фермерские хозяйства и частные покупатели могли бы ознакомиться с продукцией, рассчитать стоимость доставки и оформить заказ онлайн с оплатой картой.

Все работы по разработке сайта под ключ я выполнил лично: от проектирования структуры и верстки до интеграции платежей, доставки и контентных разделов. Обезличивание: домен сайта, название юрлица, контактные данные, телефоны и email клиента в публичной версии кейса не приводятся. Я базируюсь в Москве и работаю с заказчиками из любого региона РФ, СНГ и за рубежом — в данном случае все работы были выполнены удалённо.

Задачи проекта

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

Задача 1. Разработать каталог на WooCommerce

Реализовать каталог из 6 SKU на WooCommerce с карточками товаров, ценами, кнопкой «В корзину». Каждый товар должен иметь описание, характеристики, объём, цену в рублях. Каталог должен корректно работать с российской локализацией и форматами цен.

Задача 2. Настроить корзину и оформление заказа

Реализовать стандартный поток WooCommerce: корзина с возможностью изменения количества товаров, страница оформления заказа с вводом данных клиента (ФИО, телефон, email, адрес доставки). На этапе оформления заказа — рассчитать стоимость доставки через СДЭК и предложить клиенту оплату через Альфа-банк.

Задача 3. Интегрировать оплату через Альфа-банк

Подключить интернет-эквайринг Альфа-банка — один из самых распространённых в России провайдеров платёжных решений. Оплата должна проходить на стороне банка (для соблюдения требований PCI DSS), после успешной оплаты — клиент возвращается на сайт с подтверждением заказа.

Задача 4. Интегрировать расчёт стоимости доставки через СДЭК

Подключить API СДЭК (транспортная компания) для автоматического расчёта стоимости доставки на этапе оформления заказа. Клиент вводит адрес доставки — система запрашивает у СДЭК стоимость и срок доставки и подставляет их в итоговую сумму заказа.

Задача 5. Собрать дизайн на Elementor

Дизайн сайта собран на плагине Elementor — это популярный визуальный конструктор для WordPress, позволяющий собирать страницы из блоков методом drag-and-drop. Это даёт заказчику возможность в дальнейшем самостоятельно редактировать контент страниц без привлечения разработчика.

Задача 6. Реализовать контентные разделы

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

Задача 7. Кастомные плавающие элементы

Реализовать два отдельных кастомных плавающих элемента: блок с ссылкой на маркетплейс (для кросс-канального продвижения) и фиксированные плавающие кнопки на мессенджеры и телефон (для быстрой связи с менеджером в один клик из любого места сайта).

Структура сайта

Готовый сайт состоит из коммерческой части (каталог, корзина, оформление заказа) и контентной (справочник, статьи). Ниже — карта ключевых страниц.

URL Страница Назначение
/ Главная Презентация линейки продукции, 10 причин выбрать бренд, география доставки
Каталог продукции 6 SKU на WooCommerce с карточками товаров и ценами
/cart/ Корзина Стандартная корзина WooCommerce с русской локализацией
/checkout/ Оформление заказа Интеграция с Альфа-банком и расчётом доставки СДЭК
/spravochnik/ Справочник GSN Дозировки по 24+ сельскохозяйственным культурам
/polezno-znat/ Полезно знать (статьи) Блог с пагинацией: агрономические статьи
О компании / Доставка / Контакты Справочные страницы с информацией для клиентов

Решение

Все работы я выполнил лично по модульному принципу: каждый крупный функциональный блок вынесен в отдельный компонент. Подход к дизайну — через Elementor: это позволило собрать визуальную часть быстро и оставить заказчику возможность самостоятельно редактировать контент в будущем. Интеграции платежей и доставки выполнены через официальные API-плагины с дополнительной кастомизацией под сценарий клиента.

Этап 1. Проектирование структуры и установка стека

  • Спроектирована структура сайта: главная, каталог, корзина, оформление заказа, справочник, статьи, страницы «О компании», «Доставка», «Контакты», юридические страницы.
  • Установлен WordPress с WooCommerce и базовым набором плагинов: All in One SEO (AIOSEO) для SEO-оптимизации, Saphali Lite для русификации WooCommerce под реалии РФ, Site Kit by Google для интеграции с Google Analytics и Search Console.
  • Установлен Elementor для сборки дизайна.

Этап 2. Каталог продукции на WooCommerce

  • Создано 6 товаров WooCommerce под каждый препарат линейки клиента с ценами в рублях (диапазон цен — 4600–5000 ₽ за канистру 10 литров).
  • Для каждого товара заполнены: название, описание, характеристики, объём, изображение, категория.
  • Настроена русская локализация WooCommerce: форматы цен, валюты (₽), форматы адреса, поля на странице оформления заказа.
  • Настроена страница корзины с возможностью изменения количества товара и пересчётом итоговой суммы.

Этап 3. Интеграция оплаты через Альфа-банк

  • Подключен плагин интернет-эквайринга Альфа-банка с настройкой под реквизиты клиента.
  • Настроен процесс оплаты: после оформления заказа клиент перенаправляется на платёжную страницу Альфа-банка (соблюдение требований PCI DSS — данные карты не проходят через сайт).
  • После успешной оплаты клиент возвращается на сайт с подтверждением заказа; в случае отказа — на страницу с возможностью повторить попытку.
  • Настроены вебхуки (callbacks) от Альфа-банка для автоматического обновления статуса заказа в WooCommerce при завершении оплаты.

Этап 4. Интеграция расчёта доставки через СДЭК

  • Подключен API СДЭК (транспортная компания) для расчёта стоимости доставки.
  • На странице оформления заказа реализован блок расчёта доставки: клиент вводит адрес доставки — система автоматически запрашивает у СДЭК стоимость и срок доставки.
  • Полученная стоимость доставки добавляется к итоговой сумме заказа.
  • Реализована обработка ошибок: если СДЭК временно недоступен или не может рассчитать доставку по указанному адресу, клиенту показывается сообщение с предложением связаться с менеджером.

Этап 5. Сборка дизайна на Elementor

  • Собраны все ключевые страницы на Elementor: главная (с презентацией продукции, 10 причинами выбрать бренд, блоком географии доставки), страницы товаров, корзина, оформление заказа.
  • Настроены глобальные настройки Elementor: типографика, цветовая палитра, отступы — для единого визуального стиля по всему сайту.
  • Реализована адаптивная вёрстка под мобильные устройства через встроенные инструменты Elementor.

Этап 6. Контентные разделы: Справочник и «Полезно знать»

  • Реализован раздел «Справочник GSN» — дозировки препаратов по 24+ сельскохозяйственным культурам: пшеница, ячмень, рожь, овёс, кукуруза, подсолнечник, свекла сахарная, рапс, горох, соя, нут, чечевица, гречиха, картофель, капуста, морковь, рис, томаты, перец, огурец, кабачок, зелень, клубника, земляника, малина, голубика, яблоня, груша, черешня, персик, вишня, абрикос, виноград, смородина, крыжовник, цитрусовые, олива, табак, декоративные культуры, хлопчатник, лесные культуры.
  • Дозировки оформлены в виде модальных окон с возможностью выбора культуры — пользователь кликает на культуру и видит соответствующую схему применения.
  • Реализован раздел «Полезно знать» — блог с агрономическими статьями и пагинацией. Статьи управляются через стандартный редактор WordPress.

Этап 7. Кастомные плавающие элементы

  • Реализован кастомный плавающий блок с ссылкой на маркетплейс — отображается в фиксированной позиции на экране, привлекает внимание к альтернативному каналу покупки продукции клиента.
  • Реализованы фиксированные плавающие кнопки на мессенджеры (WhatsApp, Telegram) и телефон — отображаются в углу экрана на всех страницах, дают пользователю возможность связаться с менеджером в один клик.
  • Кнопки настроены с учётом мобильной адаптации: на мобильных устройствах они не перекрывают основной контент и не мешают навигации.

Этап 8. SEO и аналитика

  • Установлен и настроен плагин All in One SEO (AIOSEO) для управления мета-тегами Title, Description, Open Graph, Twitter Card на каждой странице.
  • Установлен Site Kit by Google для интеграции с Google Analytics и Google Search Console — заказчик видит ключевую аналитику прямо в админке WordPress.
  • Настроены человекопонятные URL (ЧПУ) для всех страниц и записей.
  • Созданы базовые юридические страницы: Политика обработки персональных данных, Политика использования cookie-файлов, Оплата, Возврат товара.

Результаты

Сайт разработан под ключ и работает в продакшене. Клиент получил полноценный интернет-магазин органических удобрений с возможностью оформить заказ и оплатить его онлайн через Альфа-банк, с автоматическим расчётом стоимости доставки через СДЭК. Контентные разделы (Справочник по 24+ культурам и блог «Полезно знать») закрывают информационные потребности клиентов и обеспечивают долгосрочный SEO-трафик по агрономическим запросам.

 

Показатель Результат
Тип проекта Разработка интернет-магазина под ключ
Платформа WordPress + WooCommerce
Конструктор дизайна Elementor (кастомная сборка)
Позиций в каталоге 6 SKU (собственная линейка удобрений)
Платёжные интеграции Альфа-банк (эквайринг)
Расчёт доставки СДЭК (через API)
Русификация WooCommerce Saphali Lite (адаптация под РФ)
SEO-плагин All in One SEO (AIOSEO)
Аналитика Site Kit by Google (Analytics + Search Console)
Контентные разделы Справочник по культурам, «Полезно знать» (статьи)
Кастомные плавающие элементы блок Marketplace + кнопки мессенджеров и телефона
География продаж Россия, СНГ, зарубежье (отгрузка 24/7)

 

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

Технологический стек

 WordPress     WooCommerce     Elementor     All in One SEO (AIOSEO)     Saphali Lite (русификация WooCommerce)     Site Kit by Google     Альфа-банк эквайринг     СДЭК API (расчёт доставки)     PHP     MySQL     Custom floating widgets     Webhooks (платёжные коллбэки)