Клиенту требовалось выполнить полноценный редизайн интернет-магазина с переносом проекта с OpenCart на WordPress + WooCommerce без потери накопленных данных и SEO-показателей.

В рамках проекта необходимо было:

• разработать новую кастомную тему WordPress;
• перенести каталог товаров, категории и изображения;
• сохранить существующую структуру URL и основные SEO-метаданные;
• реализовать современную карточку товара;
• улучшить каталог и систему навигации;
• настроить WooCommerce под особенности проекта;
• оптимизировать оформление заказа;
• обеспечить корректную работу на мобильных устройствах;
• подготовить сайт для дальнейшего масштабирования и развития.

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

Подробный разбор проекта

Таймлайн проекта

Работа над проектом включала не только редизайн, но и полноценную техническую миграцию интернет-магазина с OpenCart на WordPress + WooCommerce.

Анализ OpenCart → Проектирование → Дизайн → Верстка → Разработка WordPress → Перенос товаров → SEO → Тестирование → Запуск

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

Какие задачи пришлось решить

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

Были решены следующие задачи:

✔ Перенос нескольких тысяч товаров без потери структуры.
✔ Сохранение SEO-URL и метаданных.
✔ Настройка вариативных товаров WooCommerce.
✔ Переработка оформления заказа.
✔ Реализация AJAX без перезагрузки страниц.
✔ Адаптация под мобильные устройства.
✔ Оптимизация скорости загрузки.
✔ Исправление ошибок после миграции.
✔ Перенос блога и изображений.
✔ Проверка категорий и ручная сверка данных.

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

Что было

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

Что сделали

Полностью переработали первый экран и структуру главной страницы.

Выполнили:

• современный редизайн;
• новую структуру блоков;
• переработку меню;
• обновление баннеров;
• улучшение визуальной иерархии;
• адаптацию под мобильные устройства;
• повышение читаемости контента.

2. Каталог товаров

GIF прокрутки каталога.

Что было

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

Что сделали

Полностью переработали отображение каталога.

Результат:

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

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

Это одна из самых объемных частей проекта.

Было реализовано:

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

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

4. Фильтрация каталога

Для интернет-магазина с большим ассортиментом фильтрация является одним из ключевых элементов.

В рамках проекта были реализованы:

• фильтрация по характеристикам;
• фильтрация по атрибутам WooCommerce;
• удобное отображение фильтров;
• мобильная версия панели фильтрации;
• оптимизация пользовательского сценария поиска товара.

5. Корзина и оформление заказа

Процесс оформления заказа был полностью переработан.

Что изменилось:

• удалены лишние поля;
• упрощена форма заказа;
• улучшено отображение способов доставки;
• переработана корзина;
• ускорена работа AJAX;
• повышено удобство оформления заказа как на компьютерах, так и на мобильных устройствах.

6. Перенос данных с OpenCart

Скриншоты процесса импорта.

Одной из самых сложных частей проекта стала миграция данных.

Было перенесено:

• товары;
• категории;
• подкатегории;
• изображения;
• описания;
• артикулы;
• блог;
• SEO-информация.

При переносе выполнялась дополнительная обработка данных:

• очистка HTML;
• проверка категорий;
• сверка товаров;
• исправление структуры каталога;
• проверка корректности импорта.

Особое внимание уделялось сохранению существующей SEO-структуры сайта.

7. Адаптивная версия

Скриншоты мобильной версии.

Каждая страница сайта разрабатывалась по принципу Mobile First.

Были адаптированы:

• главная страница;
• каталог;
• карточки товаров;
• корзина;
• оформление заказа;
• личный кабинет.

В результате сайт одинаково удобно работает на смартфонах, планшетах и настольных компьютерах.

8. Технические доработки

Помимо визуального редизайна был реализован большой объем внутренней разработки.

Среди выполненных работ:

• разработка собственной темы WordPress;
• настройка WooCommerce;
• AJAX без перезагрузки страниц;
• оптимизация скорости работы;
• микроразметка;
• хлебные крошки;
• SEO-структура;
• оптимизация изображений;
• настройка карты сайта;
• robots.txt;
• перенос SEO-метаданных;
• оптимизация производительности;
• разработка дополнительного пользовательского функционала.

9. Итоги проекта

Что получил клиент

✔ Полностью обновленный современный интернет-магазин.
✔ Перенос проекта с OpenCart на WordPress + WooCommerce.
✔ Сохранение структуры каталога и SEO.
✔ Более удобную систему управления товарами.
✔ Современный адаптивный интерфейс.
✔ Подготовленную платформу для дальнейшего развития.

Статистика проекта

После этого блока можно вывести красивые карточки со статистикой проекта.

Например:

• Более 3000 перенесенных товаров.
• Сотни категорий и подкатегорий.
• Полностью сохранена структура каталога.
• Перенесены статьи блога.
• Реализованы десятки индивидуальных доработок.
• Полностью разработана кастомная тема WordPress.

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