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

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

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

Диагностика: что проверить перед добавлением новых полей

• Убедитесь, что тема и плагины не конфликтуют с кастомизацией форм.
• Проверьте, что WooCommerce обновлен до последней версии.
• Посмотрите, какие поля уже есть — возможно, достаточно доработать существующие.
• Определите, куда именно нужно добавить поле: на страницу оформления, в уведомления, в админку заказа.

Пошаговое добавление дополнительных полей в форму оформления заказа

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

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

add_action('woocommerce_after_order_notes', 'wpone_custom_checkout_field');
function wpone_custom_checkout_field( $checkout ) {
    echo '<div id="wpone_custom_checkout_field">';

    woocommerce_form_field( 'wpone_custom_note', array(
        'type'          => 'text',
        'class'         => array('wpone-custom-note form-row-wide'),
        'label'         => __('Дополнительная информация'),
        'placeholder'   => __('Введите ваши пожелания'),
        'required'      => false,
    ), $checkout->get_value( 'wpone_custom_note' ) );

    echo '</div>';
}

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

Добавим проверку, например, чтобы поле не оставалось пустым, если это необходимо:

add_action('woocommerce_checkout_process', 'wpone_custom_checkout_field_validation');
function wpone_custom_checkout_field_validation() {
    if ( isset($_POST['wpone_custom_note']) && empty(trim($_POST['wpone_custom_note'])) ) {
        wc_add_notice( __('Пожалуйста, заполните поле дополнительной информации.'), 'error' );
    }
}

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

Чтобы поле сохранилось и было доступно в админке и email:

add_action('woocommerce_checkout_update_order_meta', 'wpone_save_custom_checkout_field');
function wpone_save_custom_checkout_field( $order_id ) {
    if ( ! empty($_POST['wpone_custom_note']) ) {
        update_post_meta( $order_id, '_wpone_custom_note', sanitize_text_field($_POST['wpone_custom_note']) );
    }
}

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

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

add_action('woocommerce_admin_order_data_after_billing_address', 'wpone_display_custom_field_admin_order', 10, 1);
function wpone_display_custom_field_admin_order($order){
    $custom_note = get_post_meta( $order->get_id(), '_wpone_custom_note', true );
    if ( $custom_note ) {
        echo '<p><strong>Дополнительная информация:</strong> ' . esc_html($custom_note) . '</p>';
    }
}

5. Добавление поля в email уведомления

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

add_action('woocommerce_email_customer_details', 'wpone_add_custom_field_to_emails', 25, 4);
function wpone_add_custom_field_to_emails( $order, $sent_to_admin, $plain_text, $email ) {
    $custom_note = get_post_meta( $order->get_id(), '_wpone_custom_note', true );
    if ( $custom_note ) {
        if ( $plain_text ) {
            echo "\nДополнительная информация: " . $custom_note . "\n";
        } else {
            echo '<p>&ltstrong>Дополнительная информация:</strong> ' . esc_html( $custom_note ) . '</p>';
        }
    }
}

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

1. Откройте страницу оформления заказа и убедитесь, что новое поле отображается корректно.
2. Попробуйте оформить заказ с заполненным и пустым полем (если оно обязательно) — проверьте валидацию.
3. В админке откройте созданный заказ и убедитесь, что дополнительная информация отображается.
4. Проверьте email уведомления — поле должно присутствовать в письмах клиенту и администратору.

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

• Поле не отображается на странице оформления заказа: Проверьте правильность хука (woocommerce_after_order_notes или другие), убедитесь, что код подключен в functions.php или в плагине.
• Данные не сохраняются в заказе: Проверьте ключ в update_post_meta, убедитесь, что используется правильный ID заказа.
• Валидация не срабатывает: Проверьте, что функция добавлена на хук woocommerce_checkout_process и что используется правильный ключ из $_POST.
• Поле не показывается в email: Убедитесь, что хук woocommerce_email_customer_details поддерживается вашей темой и что код выводит данные в нужном формате.

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

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

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