Шлях покупки WooCommerce: картка, кошик, оформлення, «Дякуємо» демо під ваше ТЗ

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

UARUEN
Цемент М500, мішок
285 грн за мішок 25 кг
В наявності, відправка сьогодні до 16:00
Гарантія якостіДоставка від 1 дня
Фасування
Кількість

Що бачить покупець за кілька секунд

  • Що це, скільки коштує й чи є в наявності: у першому екрані, без прокрутки
  • Ціна оновлюється при виборі фасування й кількості, оптова ціна підказується автоматично
  • Два шляхи поруч: «Додати в кошик» для роздробу і «Заявка» для опту, обидва видно без прокрутки
  • Блок довіри (гарантія, доставка, повернення) прямо під кнопкою

Для мобільної версії

  • Кнопка закріплена внизу екрана
  • Зображення стисло, без важких слайдерів: швидкість сторінки в пріоритеті

Кошик

Доставказа тарифом перевізника
Разом0 грн

Що змінюємо в кошику

  • Зрозумілі кількість і сума, видалення в один дотик
  • Поле купону прибране вниз, щоб не відводило від оплати
  • Лишається шлях заявки для тих, кому потрібен розрахунок

Оформлення

Крок 1 з 2: контакти
Доставка
Оплата

Чому на оформленні відвалюються, і що робимо

  • Мінімум полів: лише те, без чого не доставити (4-5 замість 12)
  • Гостьова покупка без обов'язкової реєстрації
  • Підсумок і доставка видно весь час, без сюрпризів наприкінці
  • Зрозумілі помилки біля поля, а не вгорі сторінки
  • Події в GA4 на кожному кроці (view_item, add_to_cart, begin_checkout, purchase), щоб ви бачили, на якому кроці йдуть, і Google Ads отримував чисті конверсії

Дякуємо за замовлення

Номер№ 1042
Що даліМенеджер зателефонує протягом 30 хв

Сторінка «Дякуємо» теж працює

  • Чітко: що далі й коли, без порожнього «успіх»
  • Тут спрацьовує подія purchase для Google Ads
  • Пропозиція супутнього товару без нав'язування

Що робимо за вашим ТЗ

  • 1. Аналіз поточного шляху на телефоні й комп'ютері: де саме йдуть (GA4, Clarity або записи сесій, якщо підключені)
  • 2. Прототип картки, кошика й оформлення на погодження: ось цей формат, з вашим баченням з ТЗ
  • 3. Збірка в Elementor Pro: один шаблон на всі товари, варіативні товари, UA/RU/EN через Polylang
  • 4. Форми CF7 і Popup Maker на обох шляхах, швидкість: без важких віджетів, зображення у WebP
  • 5. Перевірка: мобільний, швидкість (Lighthouse до і після), тест покупки в трьох мовах

Шаблони теми використовуємо, як ви й просили: без перебудови всього сайту.