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

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

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

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

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

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

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

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

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

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

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

add_action('woocommerce_checkout_update_order_meta', 'wptickets_save_custom_checkout_field');
function wptickets_save_custom_checkout_field( $order_id ) {
    if ( ! empty($_POST['wptickets_custom_field']) ) {
        update_post_meta( $order_id, '_wptickets_custom_field', sanitize_text_field($_POST['wptickets_custom_field']) );
    }
}

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

Добавляем кастомное поле на страницу редактирования заказа:

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

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

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

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

• Поле не отображается на странице оформления заказа. Проверьте, подключён ли хук woocommerce_after_order_notes и не конфликтует ли тема или другой плагин с выводом формы.
• Значение поля не сохраняется. Убедитесь, что имя поля в $_POST совпадает с названием в функции сохранения и что используется правильный хук woocommerce_checkout_update_order_meta.
• Ошибка валидации не появляется. Проверьте использование wc_add_notice в хук woocommerce_checkout_process и что поле действительно проверяется на пустоту.
• Некорректное отображение в админке. Удостоверьтесь, что используете корректный хук woocommerce_admin_order_data_after_billing_address и правильно выводите значение.

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

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

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