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

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

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

Добавление кастомных полей позволяет расширить функционал без привлечения внешних плагинов, точно настроить обработку данных и интеграцию с CRM или внутренними бизнес-процессами.

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

1. Добавление поля с помощью хука woocommerce_checkout_fields

С помощью этого фильтра можно добавить, изменить или удалить поля на странице оформления заказа. Ниже пример добавления текстового поля "Номер паспорта" в секцию биллинга:

add_filter('woocommerce_checkout_fields', 'add_passport_field_to_checkout');
function add_passport_field_to_checkout($fields) {
    $fields['billing']['billing_passport_number'] = array(
        'type'        => 'text',
        'label'       => __('Номер паспорта', 'woocommerce'),
        'required'    => true,
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 120,
        'placeholder' => 'Введите номер паспорта'
    );
    return $fields;
}

2. Валидация заполнения кастомного поля

Для проверки заполнения поля при отправке формы используйте хук woocommerce_checkout_process:

add_action('woocommerce_checkout_process', 'validate_passport_field');
function validate_passport_field() {
    if ( empty($_POST['billing_passport_number']) ) {
        wc_add_notice(__('Пожалуйста, укажите номер паспорта.'), 'error');
    }
}

3. Сохранение данных в заказе

Чтобы данные кастомного поля сохранились и отображались в заказе, используйте хук woocommerce_checkout_update_order_meta:

add_action('woocommerce_checkout_update_order_meta', 'save_passport_field_order_meta');
function save_passport_field_order_meta($order_id) {
    if ( ! empty($_POST['billing_passport_number']) ) {
        update_post_meta($order_id, '_billing_passport_number', sanitize_text_field($_POST['billing_passport_number']));
    }
}

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

Чтобы видеть введённое значение в административной части WooCommerce, добавьте следующий код:

add_action('woocommerce_admin_order_data_after_billing_address', 'display_passport_field_in_admin_order', 10, 1);
function display_passport_field_in_admin_order($order){
    $passport = get_post_meta($order->get_id(), '_billing_passport_number', true);
    if ($passport) {
        echo '<p><strong>Номер паспорта:</strong> ' . esc_html($passport) . '</p>';
    }
}

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

• Перейдите на страницу оформления заказа и убедитесь, что поле "Номер паспорта" отображается и имеет placeholder.
• Попробуйте отправить форму без заполнения поля – должна появиться ошибка.
• Заполните поле и оформите заказ.
• В административной панели WooCommerce откройте заказ и проверьте, что поле с номером паспорта отображается в блоке с адресом биллинга.

Частые ошибки и их решение

• Поле не отображается на странице оформления заказа
  Проверьте, правильно ли подключен фильтр woocommerce_checkout_fields, нет ли синтаксических ошибок в функциях.
• Ошибка валидации не появляется
  Убедитесь, что хук woocommerce_checkout_process используется, и в теле функции вызывается wc_add_notice с типом 'error'.
• Данные не сохраняются в заказе
  Проверьте, что update_post_meta вызывается с корректным ID заказа и ключом мета.
• Кастомное поле не видно в админке
  Проверьте, что функция вывода подключена к хуку woocommerce_admin_order_data_after_billing_address и используется правильный ключ мета.

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

• Всегда используйте функции sanitize_text_field или другие фильтры для очистки пользовательских данных перед сохранением.
• Используйте esc_html при выводе данных в админке, чтобы избежать XSS-уязвимостей.
• Добавляйте кастомные поля только при необходимости, чтобы не перегружать форму и не усложнять UX.
• Для сложных или повторяющихся кастомных полей можно рассмотреть использование специализированных плагинов, например, Advanced Custom Fields, но для простых задач код эффективнее и легче поддерживается.

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