Розробка кастомної сторінки оформлення замовлення 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?
- Аналітика: вивчаємо поточний checkout, воронку, типові сценарії користувачів. Збираємо вимоги щодо полів, способів оплати та доставки.
- Проєктування: створюємо прототип нової форми — розташування блоків, логіка кроків (однокроковий або багатокроковий), інтеграція upsell.
- Розробка: реалізуємо кастомізацію через хуки та фільтри WooCommerce (мінімальне вторгнення в шаблони).
- Тестування: перевіряємо на різних браузерах і пристроях, тестуємо оплату реальними картками, сценарії з помилками.
- Деплой і підтримка: викочуємо на бойовий сервер, передаємо документацію та доступи, запускаємо моніторинг.
Що входить у роботу
- Аудит поточного checkout і воронки.
- Розробка прототипу (UI/UX).
- Кастомізація полів, додавання upsell-блоків, налаштування кроків.
- Інтеграція кастомних способів оплати (за потреби).
- Повне тестування на всіх пристроях.
- Документація з експлуатації та передача доступів.
- 6 місяців гарантії та підтримки.
Порівняння стандартного та кастомного checkout
| Параметр | Стандартний checkout | Кастомний checkout |
|---|---|---|
| Поля форми | Фіксовані, надлишкові | Тільки потрібні, адаптовані під ЦА |
| Upsell-блоки | Відсутні | Інтегровані, релевантні |
| Способи оплати | Тільки вбудовані | Будь-які: кастомні платіжні шлюзи, рахунки |
| Швидкість завантаження | Багато HTTP-запитів | Оптимізований, легкий |
| Конверсія | 2–5% середня | 4–10% після кастомізації |
Строки та вартість
Кастомізація полів checkout і додавання upsell-блоку займає від 2 днів. Багатокроковий checkout з кастомним способом оплати — від 5 днів. Вартість розраховується індивідуально після аудиту вашого магазину. Ми гарантуємо прозоре ціноутворення без прихованих платежів. Зв'яжіться з нами для аудиту вашого checkout. Замовте розробку кастомного checkout та отримайте консультацію.
Типові помилки при кастомізації checkout
- Видалення обов'язкових полів (наприклад, email) без альтернативи.
- Неоптимізований JS для багатокрокового checkout — зростання LCP.
- Відсутність fallback для кастомних полів при збої.
- Неправильна реалізація upsell: товар не додається в кошик при оформленні.
Ми враховуємо всі ці граблі — у наших проєктах таких проблем немає.
Підходи до кастомізації: хуки, шаблони, плагіни
| Підхід | Гнучкість | Швидкість | Складність підтримки |
|---|---|---|---|
| Хуки WooCommerce | Висока | Без втрат | Низька |
| Перевизначення шаблону | Середня | Незначне сповільнення | Середня |
| Плагіни-конструктори | Низька | +20–30% навантаження | Висока (залежність від плагіна) |
Хуки 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 і збільште конверсію.