Goodsize — інтернет-магазин взуття FABI і Barracuda на WooCommerce трьома мовами

Goodsize (goodsize.com.ua) — український інтернет-магазин взуття, сумок і одягу брендів FABI і Barracuda. Ми зробили магазин під ключ: від порожнього хостингу й макета у Figma до робочого сайту трьома мовами з онлайн-оплатою, доставкою Новою Поштою, трекінгом посилок і листами для тих, хто не завершив покупку. Потім перенесли сайт із тестового піддомену на основний домен і далі ведемо його за правками замовника.

Технічний стек

WordPress + WooCommerce з власною темою, зверстаною за макетом Figma, без конструкторів сторінок і без ACF: усі блоки головної, шапки й футера редагуються через власний движок полів у звичних вкладках адмінки. Мультимовність — Polylang (українська, англійська, російська) плюс наш код, який дотягує WooCommerce до трьох мов. Пошук — FiboSearch, SEO — Yoast, форми — Contact Form 7, зображення віддаються у WebP. Оплата карткою — через NovaPay, накладений платіж і банківський переказ; доставка — Нова Пошта (відділення, поштомат, кур’єр) і кур’єр по Києву.

Головна

Головна коротка й працює як вітрина: банер із кнопкою в каталог, добірка товарів і чотири великі плитки категорій — лофери та мюлі, черевики, аксесуари, одяг. Кожен блок можна змінити або вимкнути в адмінці, а таби брендів у шапці ведуть одразу у відфільтрований каталог.

Каталог і фільтри

Фільтри написані під цей магазин, а не взяті з плагіна: колір, для кого, матеріал, тип, сезон, розмір і ціна. Вони працюють без перезавантаження сторінки, а вибір зберігається в адресі, тож відфільтровану сторінку можна скинути посиланням. На телефоні фільтри відкриваються окремою панеллю. Для порожнього результату є свій стан, а не порожня сітка.

Картка товару

Розмір обирається плитками, а розміри, яких немає в наявності, сірі й перекреслені, тому покупець не натрапить на «немає» вже в кошику. Кожен розмір — окрема варіація WooCommerce зі своєю ціною. Галерея з мініатюрами, нижче характеристики й акордеони з доставкою та поверненням.

Кошик і оформлення замовлення

Кошик, оформлення й особистий кабінет зверстані за макетом, а не залишені стандартними шаблонами WooCommerce. Оформлення розбите на кроки: дані покупця, доставка й оплата, праворуч — підсумок замовлення з полем промокоду. Онлайн-оплату через NovaPay ми налаштували й перевірили наскрізно: від переходу на сторінку оплати до автоматичної зміни статусу замовлення після платежу.

Три мови

Polylang сам по собі перекладає записи, але не все, що в магазині лежить у налаштуваннях. Тому ми дописали: назви способів доставки й оплати трьома мовами, кошик, який перемикається разом із мовою сайту, блок «Вам також може сподобатись» без змішування мов, перекладені фільтри й мітки атрибутів, окремі меню й файли перекладу теми, а також окремі sitemap для кожної мови. Тексти службових сторінок (про бренд, доставка й оплата, повернення, політики, FAQ, подарункові картки) написали з нуля замість шаблонних заглушок.

Трекінг, листи й розсилка

В адмінці замовлення є статус «Відправлено», перевізник і трек-номер з готовими посиланнями на Нову Пошту, Укрпошту й Meest; покупець бачить трекінг у кабінеті й отримує лист. Для покинутих кошиків стоїть наш плагін CatCode Abandoned Cart Recovery: лист із поверненням до кошика в один клік, мовою, якою людина купувала. Підписка у футері зберігає згоду, у листах є відписка, а підключення до Brevo, Mailchimp чи Klaviyo вже готове в адмінці. Пошту магазину ми перевели на домен замовника й налаштували SPF і DKIM, щоб листи не падали в спам.

Внутрішні сторінки

Мобільна версія

Адаптив зроблено від 1440 до 360 px: бургер-меню з мовою, товари у дві колонки, фільтри окремою панеллю і оформлення в одну колонку.

Підсумок

За нами вся технічна частина магазину: власна тема з макета Figma, каталог із фільтрами й розмірами, три мови, оплата й доставка, трекінг, листи покинутого кошика й розсилка, тексти службових сторінок і перенесення на основний домен. Замовник керує банерами, товарами й текстами сам з адмінки.