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