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

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

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

Диагностика: как понять, что нужно добавить поле и где

Перед добавлением нового поля нужно ясно понимать:

• Для чего нужно дополнительное поле и на каком этапе оформления заказа оно должно отображаться (адрес доставки, оплата, дополнительные комментарии).
• Какое именно поле нужно (текстовое, селектор, дата, чекбокс и т.д.).
• Нужно ли делать поле обязательным для заполнения.
• Как будут использоваться данные этого поля (отображение в админке, письмах, экспорт и т.д.).

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

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

Используем хук woocommerce_checkout_fields для добавления поля в нужную секцию. Например, добавим текстовое поле "Номер паспорта" в блок с платежными данными:

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

2. Валидация введенных данных

Чтобы убедиться, что пользователь заполнил поле, добавим проверку с помощью хука woocommerce_checkout_process:

add_action('woocommerce_checkout_process', 'validate_custom_checkout_field');
function validate_custom_checkout_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_custom_checkout_field');
function save_custom_checkout_field($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, добавим вывод мета-поля с помощью хука woocommerce_admin_order_data_after_billing_address:

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

5. Добавление поля в письма с заказом

Чтобы дополнительное поле отображалось в email уведомлениях, используем фильтр woocommerce_email_order_meta_fields:

add_filter('woocommerce_email_order_meta_fields', 'add_custom_field_to_emails');
function add_custom_field_to_emails($fields) {
    $fields['billing_passport_number'] = array(
        'label' => 'Номер паспорта',
        'value' => get_post_meta(wc_get_order()->get_id(), '_billing_passport_number', true),
    );
    return $fields;
}

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

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

Частые ошибки при добавлении своих полей в WooCommerce и их исправление

• Поле не отображается на странице оформления заказа — скорее всего, неверно настроен ключ массива $fields или хук добавлен неправильно. Проверьте, что вы добавляете поле в существующую секцию, например, billing или shipping.
• Валидация не срабатывает — убедитесь, что имя поля в $_POST совпадает с ключом, который вы указали в woocommerce_checkout_fields.
• Данные не сохраняются в заказе — проверьте вызов update_post_meta, а также, что функция выполняется при сохранении заказа.
• Поле не отображается в письмах — для корректной работы фильтра woocommerce_email_order_meta_fields передавайте ID заказа или корректно получайте объект заказа.

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

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

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