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

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

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

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

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

В файле functions.php вашей дочерней темы добавьте следующий код, который добавит текстовое поле «Номер офиса доставки» в раздел оплаты:

add_action('woocommerce_after_order_notes', 'wpabout_add_custom_checkout_field');
function wpabout_add_custom_checkout_field($checkout) {
    woocommerce_form_field('office_number', array(
        'type'          => 'text',
        'class'         => array('office-number form-row-wide'),
        'label'         => __('Номер офиса доставки'),
        'placeholder'   => __('Введите номер офиса'),
        'required'      => false,
    ), $checkout->get_value('office_number'));
}

2. Валидация поля (если требуется)

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

add_action('woocommerce_checkout_process', 'wpabout_validate_office_number');
function wpabout_validate_office_number() {
    if (!$_POST['office_number']) {
        wc_add_notice(__('Пожалуйста, укажите номер офиса доставки.'), 'error');
    }
}

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

add_action('woocommerce_checkout_update_order_meta', 'wpabout_save_office_number');
function wpabout_save_office_number($order_id) {
    if (!empty($_POST['office_number'])) {
        update_post_meta($order_id, '_office_number', sanitize_text_field($_POST['office_number']));
    }
}

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

add_action('woocommerce_admin_order_data_after_billing_address', 'wpabout_display_office_number_admin', 10, 1);
function wpabout_display_office_number_admin($order){
    $office_number = get_post_meta($order->get_id(), '_office_number', true);
    if ($office_number) {
        echo '<p><strong>Номер офиса доставки:</strong> ' . esc_html($office_number) . '</p>';
    }
}

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

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

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

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

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

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

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