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

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

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

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

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

Используем хук woocommerce_after_order_notes для вывода нового поля после стандартных заметок к заказу:

add_action('woocommerce_after_order_notes', 'wpb_add_custom_checkout_field');
function wpb_add_custom_checkout_field($checkout) {
    echo '<div id="custom_checkout_field">';
    woocommerce_form_field('custom_field', array(
        'type'          => 'text',
        'class'         => array('custom-field-class form-row-wide'),
        'label'         => __('Номер договора'),
        'placeholder'   => __('Введите номер договора'),
        'required'      => false,
    ), $checkout->get_value('custom_field'));
    echo '</div>';
}

2. Валидация поля при оформлении заказа

Если поле обязательное, нужно проверить ввод. В нашем примере поле необязательное, но покажем как добавить проверку:

add_action('woocommerce_checkout_process', 'wpb_custom_checkout_field_process');
function wpb_custom_checkout_field_process() {
    if (isset($_POST['custom_field']) && empty($_POST['custom_field'])) {
        wc_add_notice(__('Пожалуйста, введите номер договора.'), 'error');
    }
}

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

add_action('woocommerce_checkout_update_order_meta', 'wpb_save_custom_checkout_field');
function wpb_save_custom_checkout_field($order_id) {
    if (!empty($_POST['custom_field'])) {
        update_post_meta($order_id, '_custom_field', sanitize_text_field($_POST['custom_field']));
    }
}

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

add_action('woocommerce_admin_order_data_after_billing_address', 'wpb_display_custom_field_admin_order', 10, 1);
function wpb_display_custom_field_admin_order($order){
    $custom_field = get_post_meta($order->get_id(), '_custom_field', true);
    if ($custom_field) {
        echo '<p><strong>Номер договора:</strong> ' . esc_html($custom_field) . '</p>';
    }
}

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

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

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

• Поле не отображается на странице оформления заказа: проверьте, что хук woocommerce_after_order_notes используется корректно и тема не переопределяет шаблон checkout.
• Данные не сохраняются в заказе: убедитесь, что имя поля в $_POST совпадает с используемым в функциях сохранения, а данные проходят через sanitize_text_field().
• Ошибка валидации не появляется: проверьте, что хук woocommerce_checkout_process правильно подключён, и вызов wc_add_notice() корректен.
• Админка не показывает поле: убедитесь, что используете правильный хук woocommerce_admin_order_data_after_billing_address и правильно получаете метаданные заказа.

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

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

Сравнение способов добавления пользовательских полей в WooCommerce