TehnoVek — WooCommerce Магазин електро- та мото- транспорту
Масштабована вітрина WooCommerce, розроблена як перший етап майбутнього повномасштабного інтернет-магазину
Role: Structure, design, WordPress development · Year: 2026 · Stack: WordPress / Astra Pro / Elementor / WooCommerce
TehnoVek — масштабований WooCommerce магазин електро- та мото- транспорту
Рік: 2026
Тип проєкту: Розробка магазину WooCommerce
Платформа: WordPress
Стек: Astra Pro / Elementor / Ultimate Addons for Elementor / WooCommerce
Додаткові інструменти: SureForms / Variation Swatches for WooCommerce / Modal Window / WPCode
Бізнес-модель: Фізичний магазин + онлайн-каталог товарів із запланованим розширенням е-комерції
Основні товари: Електричні скутери / електричні триколісні велосипеди / електровелосипеди / мотоцикли / квадроцикли / запчастини та аксесуари
{/}
Про проєкт
TehnoVek — український роздрібний продавець електро- і мото- транспорту, запчастин та аксесуарів.
З самого початку вимогою було створення першого технічного етапу майбутнього інтернет-магазину, а не тимчасового рекламного сайту.
На момент запуску сайт мав функціонувати переважно як вітрина магазину та каталог товарів у стилі цільової сторінки, тоді як його базова архітектура мала підтримувати подальше розширення до повноцінної системи електронної комерції без перебудови проекту з нуля.
Не було надано жодного готового дизайну, брендбуку чи детальної технічної специфікації.
Початковий бриф складався переважно з функціональних вимог та ідей для майбутнього розвитку, тому структура, логіка інтерфейсу та візуальне представлення формувалися безпосередньо під час впровадження.
{?}
Підхід до архітектури та розробки
Замість створення тимчасової цільової сторінки та її подальшої заміни, проєкт з самого початку розроблявся як справжній магазин WooCommerce.
Продукт, категорія, варіація, інвентар та інші основні функції WooCommerce залишаються доступними в системі, тоді як кошик та оформлення замовлення наразі приховані від публічного інтерфейсу відповідно до стратегії запуску клієнта.
Такий підхід дозволяє сайту працювати як каталог продуктів на початковому етапі, зберігаючи при цьому технічну основу, необхідну для майбутніх платежів, доставки та інших інтеграцій електронної комерції.
Сайт було створено за допомогою Astra Pro, Elementor, WooCommerce та Ultimate Addons for Elementor, з кількома додатковими плагінами та користувацьким кодом, що використовуються для специфічної функціональності інтерфейсу.
Розробку було проведено на хостинговому середовищі підрядника, а готовий сайт пізніше було клоновано на хостинг та продакшн-домен клієнта.
Мобільна · TehnoVek
{#}
Структура головної сторінки та вітрини магазину
Головну сторінку було створено з нуля у форматі цільової сторінки, а не за звичайним макетом головної сторінки інтернет-магазину.
Її структура поступово представляє асортимент товарів, варіанти придбання, бізнес-переваги, інформацію про послуги та можливості контакту через послідовність спеціальних розділів.
У розділі героя використовується слайдер фонового зображення з ефектом Кена Бернса, а клікабельні банери категорій безпосередньо під героєм забезпечують швидкий доступ до основних груп товарів.
Віджети продуктів WooCommerce інтегровані в кілька розділів головної сторінки, що дозволяє відвідувачам переглядати вибрані продукти та переходити безпосередньо до окремих сторінок продуктів, не виходячи з цільового екрану.
Клікабельні банери категорій
Віджети продуктів WooCommerce
Кнопки заклику до дії та прямого контакту
Можливості контактів розподілені по всій сторінці.
Основні кнопки заклику до дії відкривають контактні форми в модальних вікнах, тоді як клікабельні елементи керування Telegram, Viber, WhatsApp і гаряча лінія забезпечують миттєві альтернативні канали зв’язку.
Та сама логіка комунікації продовжується у верхньому та нижньому колонтитулах.
Кнопки заклику до дії відкривають контактні форми всередині модальних вікон
У футері також є посилання на соціальні мережі, форма підписки на розсилку та вбудована карта Google, на якій показано розташування фізичного магазину клієнта.
Прозорі та звичайні заголовки та нижній колонтитул
{&}
Каталог товарів та структура категорій
Початковий каталог був заповнений 16 реальними товарами, а не демонстраційним контентом, більшість з яких були налаштовані як варіативні товари WooCommerce.
Категорії товарів були реалізовані не просто як архівні сторінки, а з можливістю додавання додаткового контенту.
Це дає змогу поступово перетворювати окремі категорії на цільові сторінки, орієнтовані на пошук та рекламу, у міру зростання каталогу.
TehnoVek — Сторінка каталогу товарів
Також було впроваджено базову систему фільтрації продуктів.
Замість того, щоб постійно займати простір вітрини магазину, фільтри відкриваються всередині висувної панелі з лівого боку екрана, що забезпечує компактність інтерфейсу каталогу, особливо на мобільних пристроях.
Фільтри магазина — десктоп
Фільтри магазина — мобільна
{%}
Налаштування сторінки товару
Сторінки товарів WooCommerce отримали кілька змін інтерфейсу та поведінки, що виходять за рамки стандартної функціональності магазину.
Variation Swatches for WooCommerce був використаний для забезпечення більш візуально прийнятного інтерфейсу вибору варіацій продукту.
TehnoVek — Сторінка товару,десктоп
Для продуктів, кольорові варіанти яких складаються з двох або більше кольорів, стандартну поведінку плагіна було додатково розширено за допомогою кастомного рішення.
Замість відображення лише одного селектора кольорів, окремі зразки можуть візуально представляти кілька кольорів в межах одного варіанта.
Стандартне повідомлення про наявність товарів у WooCommerce також було змінено для поточної моделі продажів, орієнтованих на каталог.
Окремі зразки з кількома кольорами
«Перевірити наявність», «Поставити запитання» та опції прямого зв’язку
Замість простого відображення «В наявності», вітрина магазину використовує дію «Перевірити наявність», безпосередньо пов’язану з модальною контактною формою.
На сторінки товарів додано окрему кнопку «Поставити запитання», яка відкриває контактну форму в модальному вікні. Форма автоматично попередньо заповнюється назвою товару та прямим посиланням на поточну сторінку товару, тому кожен запит одразу ідентифікує товар, про який запитує клієнт.
Той самий блок інтерфейсу включає прямий перехід до месенджерів та телефонної гарячої лінії, що надає відвідувачам кілька способів зв’язатися з магазином, не входячи в традиційний процес оформлення замовлення.
Контактна форма відкрита в модальному вікні — сторінка товару, десктоп
{\}
Контент товару в блоках, що розгортаються
Описи товарів були підготовлені в Elementor для ефектнішого представлення, ніж у стандартному текстовому редакторі WooCommerce.
Оскільки технічні продукти можуть вимагати значної кількості інформації, відображення кожної деталі безпосередньо на сторінці призведе до надмірно довгих макетів продукту.
Щоб сторінки товарів були компактними та зручнішими для навігації, розширений опис було розміщено всередині спеціального розділу, котрий первісно згорнутий, і може за кліками розгортатися та згортатися, реалізованого без додаткового плагіна.
Опис товару всередині розділу, що розгортається, десктоп
Технічні специфікації були організовані окремо в розділах-акордеонах.
Технічні характеристики, організовані в секції акордеона,десктоп
Така структура забезпечує читабельність початкової сторінки продукту, водночас надаючи детальну інформацію, коли вона потрібна відвідувачам.
Цей підхід особливо корисний для таких продуктів, як електричні скутери, електровелосипеди та квадроцикли, де специфікації можуть включати численні параметри, що охоплюють двигуни, акумулятори, гальма, підвіску, розміри, колеса, електроніку та інші технічні характеристики.
{Q}
Удосконалення інтерфейсу та навігації
Залежно від контексту сторінки було реалізовано різну поведінку заголовка.
Головна сторінка та основні інформаційні сторінки використовують прозорий заголовок, тоді як каталог та інші внутрішні сторінки використовують стандартну версію.
“Липкий” заголовок залишається закріпленим на веб-сайті та автоматично приховується під час прокручування вниз, повертаючись, коли користувач прокручує вгору.
Кілька рядків інтерфейсу, які були недоступні через стандартну систему локалізації WordPress або WooCommerce, також були локалізовані за допомогою легкої кастомізації PHP, а не додавання ще одного плагіна перекладу чи зміни основних файлів WordPress.
Ці невеликі коригування допомогли зберегти узгодженість інтерфейсу без появи непотрібних залежностей.
{+}
Допоміжні сторінки та елементи GDPR
Окрім структури вітрини магазину та каталогу, проєкт включав основні інформаційні сторінки, такі як «Про нас» та «Контакти».
Також було створено кілька допоміжних юридичних сторінок разом із їхнім контентом:
- Публічна оферта;
- Правила та умови;
- Політика конфіденційності;
- Політика щодо файлів cookie.
Було реалізовано інтерфейс згоди на використання файлів cookie, орієнтований на GDPR, з індивідуальними налаштуваннями, а не простим банером, що відображає лише сповіщення.
Це створило базову правову структуру та структуру конфіденційності, необхідну для подальшого розвитку комерційного веб-сайту.
Інтерфейс згоди на використання файлів cookie
Інтерфейс згоди на використання файлів cookie з індивідуальними елементами керування, десктоп
{W}
Налаштування контактів та сповіщень
Акаунти електронної пошти на основі домену були створені на хостинговому середовищі клієнта та підключені до контактних форм вебсайту.
Вхідні форми надсилаються на електронну адресу домену магазину, а копії автоматично пересилаються на приватну електронну адресу клієнта.
Також було налаштовано інтеграцію Telegram як додатковий канал сповіщень.
Повідомлення, надіслані через форми на веб-сайті, разом зі сповіщеннями електронною поштою, згенерованими веб-сайтом, дублюються боту Telegram.
В результаті, запити клієнтів не залежать від одного каналу зв’язку та можуть бути швидко помічені, навіть коли клієнт знаходиться далеко від інтерфейсу адміністрування веб-сайту.
{U}
Продуктивність та технічне розгортання
Після розробки веб-сайт було клоновано з середовища підрядника на хостинг та продакшн-домен клієнта.
Продакшн-сервер використовує LiteSpeed, тому кешування та оптимізація продуктивності були налаштовані після розгортання відповідно до поведінки кінцевого середовища хостингу.
Тестування Google PageSpeed після оптимізації показало, що мобільні бали по всьому вебсайту перевищують 80, а на комп’ютерах – 90, причому багато сторінок досягли 99–100.
Базовий захист від спроб входу методом перебору також був налаштований для області адміністрування WordPress.
Таким чином, остаточне розгортання включало не лише сам магазин, але й допомогу з хостингом, електронну пошту, сповіщення, продуктивність та базову конфігурацію безпеки, необхідні для практичної щоденної роботи.
{!}
Результат
Клієнт отримав робочу вітрину на базі WooCommerce, розроблену як перший етап більшого проекту електронної комерції.
Поставлена версія включає:
- кастомна головна сторінка в стилі лендінгу;
- Архітектура продуктів та категорій WooCommerce;
- 16 реальних продуктів, більшість з варіаціями;
- налаштовані сторінки товарів та селектори варіацій;
- кастомні багатоколірні опції варіацій;
- функціонал модальних запитів;
- пряме спілкування через месенджери та гарячу лінію;
- розширювані описи продуктів та технічні характеристики на основі акордеона;
- фільтрація продукту у висувній панелі;
- інформаційні та юридичні сторінки;
- Контроль файлів cookie, орієнтований на GDPR;
- інтеграція доменної електронної пошти та сповіщень Telegram;
- адаптивна поведінка магазину;
- кешування та оптимізація продуктивності на робочому сервері;
- архітектура, готова до подальшого розширення електронної комерції.
Наразі сайт навмисно працює без видимого кошика та оформлення замовлення.
Ці компоненти можна впровадити пізніше разом з оплатою, доставкою та іншими комерційними інтеграціями без заміни базової структури WooCommerce.
{*}
Нотатки
Цей портфоліо-кейс зберігає початковий етап релізу веб-сайту TehnoVek.
Проєкт був навмисно розроблений як масштабована система, а не як готова одноразова цільова сторінка.
Клієнт планує продовжувати розширення каталогу продуктів і може запровадити додаткові функції, такі як послуги оплати та розстрочки, більш розширену фільтрацію продуктів, інтеграцію доставки та інші функції електронної комерції.
З цієї причини, представлену тут версію слід розглядати як технічну та структурну основу проєкту, а не як його остаточний можливий стан.
Окрема демонстраційна копія зберігає цю початкову реалізацію, навіть якщо веб-сайт робочої версії продовжує розвиватися.
Якщо майбутній розвиток стане достатньо суттєвим, пізніші етапи можуть бути задокументовані окремо як поточний випадок розробки та налаштування WooCommerce.
→ Переглянути початковий реліз
{!}
Підтвердження співпраці
Проєкт було реалізовано через Freelancehunt.
Нижче — реальний відгук замовника, який досі доступний на платформі.
…Якщо ви хочете обговорити проєкт, уточнити вимоги або розглянути можливі варіанти співпраці, ви можете знайти всі контактні дані на сторінці контактів.