Разработка кастомной страницы оформления заказа WooCommerce

Разработка кастомной страницы оформления заказа WooCommerce

Стандартная страница checkout WooCommerce — функциональна, но шаблонна. Кастомизация позволяет: упростить форму (убрать ненужные поля), добавить upsell-блоки, реализовать одностраничный checkout, интегрировать кастомные способы доставки и оплаты.

Подходы к кастомизации

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

Переопределение шаблона — скопировать woocommerce/templates/checkout/form-checkout.php в your-theme/woocommerce/checkout/form-checkout.php и редактировать.

Плагины-конструкторы — CartFlows, FunnelKit — визуальные конструкторы воронок продаж.

Хуки 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;
});

Сроки

Кастомизация полей checkout и добавление upsell-блока — 2–3 дня. Многошаговый checkout с кастомным способом оплаты — 5–7 дней.