Разработка кастомной страницы оформления заказа 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 и увеличьте конверсию.