wppartner.ru wordpress WP Partner

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

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

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

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

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

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

Для вывода дополнительного поля используем хук woocommerce_after_order_notes. Пример кода, который нужно добавить в functions.php вашей темы или в кастомный плагин:

add_action('woocommerce_after_order_notes', 'wppartner_add_custom_checkout_field');
function wppartner_add_custom_checkout_field( $checkout ) {
    echo '<div id="wppartner_custom_checkout_field">';
    woocommerce_form_field( 'custom_info', array(
        'type'          => 'text',
        'class'         => array('wppartner-field form-row-wide'),
        'label'         => __('Дополнительная информация'),
        'placeholder'   => __('Введите дополнительные данные'),
        'required'      => false,
    ), $checkout->get_value( 'custom_info' ) );
    echo '</div>';
}

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

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

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

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

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

add_action('woocommerce_checkout_update_order_meta', 'wppartner_save_custom_checkout_field');
function wppartner_save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['custom_info'] ) ) {
        update_post_meta( $order_id, '_custom_info', sanitize_text_field( $_POST['custom_info'] ) );
    }
}

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

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

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

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

  • Откройте страницу оформления заказа и убедитесь, что новое поле «Дополнительная информация» отображается под формой.
  • Попробуйте оформить заказ с заполненным и пустым полем (если оно обязательное) — проверьте валидацию.
  • После оформления заказа зайдите в админку WooCommerce > Заказы и откройте созданный заказ — проверьте, что дополнительная информация отображается в блоке с адресом покупателя.
  • При необходимости добавьте отображение этого поля в email-уведомления, если нужно информировать менеджеров или клиентов.

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

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

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

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

Сравнение способов добавления поля дополнительной информации в WooCommerce

МетодОписаниеПлюсыМинусы
Добавление через хуки и кодИспользование хуков woocommerce_form_field, сохранение через мета данныеПолный контроль, минимум зависимостей, легковесноТребует навыков программирования, не подходит для новичков
Плагины для кастомных полей (например, Checkout Field Editor)Графический интерфейс для добавления полейПростота использования, быстрая настройкаЗависимость от стороннего кода, возможны конфликты и нагрузка
Использование кастомных форм вне WooCommerceСоздание отдельной формы и интеграция с заказамиГибкость, возможность сложной логикиСложность реализации, может требовать дополнительного кода для интеграции
×
Сделай свой сайт крутым!

Скидка -20% на премиум плагины WordPress

Выбрать плагин сейчас ⋙