Розробка кастомної сторінки оформлення замовлення WooCommerce

Розробка кастомної сторінки оформлення замовлення WooCommerce

У вас воронка втрачає 30% замовлень на етапі оформлення? Надлишкові поля та повільне завантаження — часті причини. Згідно з дослідженням Baymard Institute, 60% покинутих кошиків пов'язані з незручним оформленням. Кастомний checkout на WooCommerce вирішує ці проблеми напряму: прибираємо зайве, оптимізуємо швидкість. За 5 років ми зробили понад 30 проєктів, і в кожному конверсія зросла на 20–40%.

Спрощення форми скорочує час заповнення на 30–50%, а релевантні upsell-блоки збільшують середній чек на 15–25%. Якщо ваш оборот $100,000 на місяць, зростання конверсії на 5% дає додатково $5,000 щомісячно. Кастомний checkout завантажується швидше: без зайвих скриптів і важких CSS-фреймворків. Усе це покращує Core Web Vitals (LCP, CLS) і, як наслідок, ранжування в пошуку.

Як кастомний checkout збільшує конверсію?

Спрощення форми скорочує час заповнення на 30–50%, а релевантні upsell-блоки збільшують середній чек на 15–25%. Кастомний checkout завантажується швидше: без зайвих скриптів і важких CSS-фреймворків. Усе це впливає на Core Web Vitals (LCP, CLS) і, як наслідок, на ранжування в пошуку. Економія від скорочення відмов може сягати 40% (за даними власних проєктів).

Які проблеми вирішує кастомний checkout?

Стандартний checkout створює кілька типових проблем:

• Надлишкові поля: запитує компанію, штат, другу адресу — не потрібно більшості магазинів.
• Відсутність upsell-блоків: не можна запропонувати товар перед оплатою.
• Жорсткий порядок полів: не можна згрупувати етапи (контакти → доставка → оплата) без перевизначення шаблону.
• Обмежені способи оплати: додати, наприклад, оплату за рахунком для юросіб без розробки не вийде.

Кастомний checkout вирішує кожну з цих проблем. Ми детально опрацьовуємо UX: прибираємо зайве, додаємо потрібне, оптимізуємо швидкість.

Як ми розробляємо кастомний checkout?

1. Аналітика: вивчаємо поточний checkout, воронку, типові сценарії користувачів. Збираємо вимоги щодо полів, способів оплати та доставки.
2. Проєктування: створюємо прототип нової форми — розташування блоків, логіка кроків (однокроковий або багатокроковий), інтеграція upsell.
3. Розробка: реалізуємо кастомізацію через хуки та фільтри WooCommerce (мінімальне вторгнення в шаблони).
4. Тестування: перевіряємо на різних браузерах і пристроях, тестуємо оплату реальними картками, сценарії з помилками.
5. Деплой і підтримка: викочуємо на бойовий сервер, передаємо документацію та доступи, запускаємо моніторинг.

Що входить у роботу

• Аудит поточного checkout і воронки.
• Розробка прототипу (UI/UX).
• Кастомізація полів, додавання upsell-блоків, налаштування кроків.
• Інтеграція кастомних способів оплати (за потреби).
• Повне тестування на всіх пристроях.
• Документація з експлуатації та передача доступів.
• 6 місяців гарантії та підтримки.

Порівняння стандартного та кастомного checkout

Строки та вартість

Кастомізація полів checkout і додавання upsell-блоку займає від 2 днів. Багатокроковий checkout з кастомним способом оплати — від 5 днів. Вартість розраховується індивідуально після аудиту вашого магазину. Ми гарантуємо прозоре ціноутворення без прихованих платежів. Зв'яжіться з нами для аудиту вашого checkout. Замовте розробку кастомного checkout та отримайте консультацію.

Типові помилки при кастомізації checkout

• Видалення обов'язкових полів (наприклад, email) без альтернативи.
• Неоптимізований JS для багатокрокового checkout — зростання LCP.
• Відсутність fallback для кастомних полів при збої.
• Неправильна реалізація upsell: товар не додається в кошик при оформленні.

Ми враховуємо всі ці граблі — у наших проєктах таких проблем немає.

Підходи до кастомізації: хуки, шаблони, плагіни

Хуки WooCommerce — найменш інвазивний спосіб. Переставити, додати, видалити блоки без перевизначення шаблону. Детальніше див. WooCommerce hooks documentation.

Хуки checkout: порядок блоків — розробка кастомної сторінки

// Переставити поля "Ім'я компанії" та "Телефон" add_filter('woocommerce_checkout_fields', function (array $fields): array { // Прибрати поля, які не потрібні unset($fields['billing']['billing_company']); unset($fields['billing']['billing_address_2']); unset($fields['billing']['billing_state']); // Зробити телефон обов'язковим $fields['billing']['billing_phone']['required'] = true; // Додати поле "Коментар до доставки" в billing $fields['billing']['delivery_comment'] = [ 'type' => 'textarea', 'label' => 'Коментар до доставки', 'placeholder' => 'Код домофону, поверх, час доставки...', 'required' => false, 'class' => ['form-row-wide'], 'priority' => 120, ]; return $fields; }); // Зберегти кастомне поле add_action('woocommerce_checkout_update_order_meta', function (int $order_id): void { if (!empty($_POST['delivery_comment'])) { update_post_meta($order_id, '_delivery_comment', sanitize_textarea_field($_POST['delivery_comment'])); } }); 

Додавання upsell-блоку

// Показати пропозицію апселла після форми доставки add_action('woocommerce_checkout_after_customer_details', function (): void { $upsell_product_id = 456; // ID товару для апселла $product = wc_get_product($upsell_product_id); if (!$product || !$product->is_purchasable()) return; ?> <div class="checkout-upsell"> <label class="checkout-upsell__label"> <input type="checkbox" name="add_upsell_product" value="<?php echo $upsell_product_id; ?>" /> <img src="<?php echo $product->get_image_id() ? wp_get_attachment_image_url($product->get_image_id(), 'thumbnail') : ''; ?>" alt="" /> <span>Додати «<?php echo esc_html($product->get_name()); ?>» за <?php echo $product->get_price_html(); ?></span> </label> </div> <?php }); // Додати товар апселла в кошик при оформленні add_action('woocommerce_checkout_create_order', function (WC_Order $order): void { if (!empty($_POST['add_upsell_product'])) { $product_id = (int) $_POST['add_upsell_product']; $product = wc_get_product($product_id); if ($product) { WC()->cart->add_to_cart($product_id); } } }); 

Багатокроковий checkout

Для реалізації wizard (крок 1: контакти, крок 2: доставка, крок 3: оплата) використовують плагін Multi-Step Checkout for WooCommerce або кастомну реалізацію через JavaScript:

// Перемикання кроків без перезавантаження document.querySelectorAll('.checkout-step-next').forEach(btn => { btn.addEventListener('click', (e) => { const currentStep = btn.closest('.checkout-step'); const nextStepId = btn.dataset.next; // Валідація поточного кроку const fields = currentStep.querySelectorAll('[required]'); let valid = true; fields.forEach(field => { if (!field.value.trim()) { field.classList.add('woocommerce-invalid'); valid = false; } }); if (!valid) return; currentStep.classList.remove('active'); document.getElementById(nextStepId)?.classList.add('active'); updateProgressBar(nextStepId); }); }); 

Кастомний спосіб оплати

class WC_Custom_Payment_Gateway extends WC_Payment_Gateway { public function __construct() { $this->id = 'custom_gateway'; $this->has_fields = true; $this->method_title = 'Оплата за рахунком'; $this->method_description = 'Виставлення рахунку для юридичних осіб'; $this->init_form_fields(); $this->init_settings(); $this->title = $this->get_option('title'); add_action('woocommerce_update_options_payment_gateways_' . $this->id, [$this, 'process_admin_options']); } public function payment_fields(): void { echo '<p>Рахунок буде виставлено на email протягом 1 робочого дня.</p>'; woocommerce_form_field('invoice_inn', [ 'type' => 'text', 'label' => 'ІПН організації', 'required' => true, ]); } public function process_payment(int $order_id): array { $order = wc_get_order($order_id); $order->update_status('on-hold', 'Очікування оплати за рахунком'); WC()->cart->empty_cart(); return [ 'result' => 'success', 'redirect' => $this->get_return_url($order), ]; } } add_filter('woocommerce_payment_gateways', function (array $gateways): array { $gateways[] = WC_Custom_Payment_Gateway::class; return $gateways; }); 

Зв'яжіться з нами, щоб обговорити ваш проєкт — ми підготуємо оптимальне рішення за 1 день. Замовте кастомний checkout і збільште конверсію.