WooCommerce: как добавить пользовательское поле в форму оплаты через хук

Диагностика задачи: зачем добавлять пользовательское поле в форму оплаты WooCommerce

Иногда стандартных полей WooCommerce недостаточно для сбора дополнительной информации от покупателя на этапе оформления заказа. Например, нужно получить ИНН, номер договора или комментарий, связанный с оплатой. Добавление собственного поля на страницу оплаты позволяет расширить функционал без использования громоздких плагинов.

Пошаговое решение: добавляем пользовательское поле в форму оплаты

1. Добавляем поле на страницу оплаты

Для вывода поля используем хук woocommerce_after_order_notes. Вот пример кода, который вставьте в файл functions.php вашей темы или в отдельный плагин:

add_action('woocommerce_after_order_notes', 'wpbegin_add_custom_checkout_field');
function wpbegin_add_custom_checkout_field($checkout) {
    echo '<div id="custom_checkout_field">';

    woocommerce_form_field('custom_payment_info', array(
        'type'          => 'text',
        'class'         => array('custom-payment-info form-row-wide'),
        'label'         => __('Дополнительная информация для оплаты'),
        'placeholder'   => __('Введите данные'),
        'required'      => false,
    ), $checkout->get_value('custom_payment_info'));

    echo '</div>';
}

2. Валидация поля при отправке формы

Если поле обязательно, проверяем его заполнение:

add_action('woocommerce_checkout_process', 'wpbegin_validate_custom_checkout_field');
function wpbegin_validate_custom_checkout_field() {
    if ( isset($_POST['custom_payment_info']) && empty($_POST['custom_payment_info']) ) {
        wc_add_notice(__('Пожалуйста, заполните дополнительную информацию для оплаты.'), 'error');
    }
}

3. Сохраняем данные поля в метаданные заказа

add_action('woocommerce_checkout_update_order_meta', 'wpbegin_save_custom_checkout_field');
function wpbegin_save_custom_checkout_field($order_id) {
    if ( ! empty($_POST['custom_payment_info']) ) {
        update_post_meta($order_id, '_custom_payment_info', sanitize_text_field($_POST['custom_payment_info']));
    }
}

4. Отображаем поле в админке заказа

add_action('woocommerce_admin_order_data_after_billing_address', 'wpbegin_display_custom_field_in_admin_order', 10, 1);
function wpbegin_display_custom_field_in_admin_order($order){
    $custom_info = get_post_meta($order->get_id(), '_custom_payment_info', true);
    if ($custom_info) {
        echo '<p><strong>Дополнительная информация для оплаты:</strong> ' . esc_html($custom_info) . '</p>';
    }
}

Проверка результата после внедрения

• Откройте страницу оформления заказа и убедитесь, что поле отображается после блока заметок.
• Попробуйте оформить заказ с заполненным и пустым полем (если оно обязательное) и проверьте срабатывание валидации.
• В админке перейдите в заказ и проверьте, что введённые данные отображаются в разделе с адресом плательщика.

Частые ошибки и как их исправить

• Поле не отображается на странице оформления заказа: проверьте, что хук woocommerce_after_order_notes корректно подключён, а код добавлен в активную тему или плагин.
• Данные не сохраняются в заказе: убедитесь, что функция сохранения подключена к хуку woocommerce_checkout_update_order_meta и что поле передаётся через POST.
• Валидация не работает: проверьте, что функция проверки подключена к woocommerce_checkout_process и корректно добавляет ошибки через wc_add_notice().

Практические советы по безопасности и производительности

• Обязательно используйте sanitize_text_field() или другие функции очистки данных перед сохранением, чтобы избежать XSS и других уязвимостей.
• Не добавляйте слишком много дополнительных полей на страницу оплаты — это может снизить конверсию и увеличить время загрузки.
• Для более сложных полей (например, даты, селекты) используйте соответствующие параметры в woocommerce_form_field().
• Если дополнительных полей много, рассмотрите возможность создания отдельного блока через шаблоны WooCommerce для удобства поддержки.

Сравнение вариантов: использовать код или плагин для добавления поля