Добавление пользовательского поля в форму оформления заказа WooCommerce через хуки

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

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

Пошаговое решение: добавляем и сохраняем поле

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

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

add_action('woocommerce_after_order_notes', 'wptemy_add_custom_checkout_field');
function wptemy_add_custom_checkout_field($checkout) {
    echo '<div id="wptemy_custom_checkout_field">';
    woocommerce_form_field('wptemy_delivery_instructions', array(
        'type' => 'textarea',
        'class' => array('wptemy-delivery-instructions form-row-wide'),
        'label' => __('Инструкции для курьера'),
        'placeholder' => __('Введите здесь инструкции для доставки'),
        'required' => false,
    ), $checkout->get_value('wptemy_delivery_instructions'));
    echo '</div>';
}

2. Валидация поля при оформлении заказа

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

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

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

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

add_action('woocommerce_checkout_update_order_meta', 'wptemy_save_custom_checkout_field');
function wptemy_save_custom_checkout_field($order_id) {
    if ( ! empty($_POST['wptemy_delivery_instructions']) ) {
        update_post_meta($order_id, 'wptemy_delivery_instructions', sanitize_textarea_field($_POST['wptemy_delivery_instructions']));
    }
}

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

Чтобы менеджер видел введённые данные в админке WooCommerce, добавьте вывод с помощью хука woocommerce_admin_order_data_after_billing_address:

add_action('woocommerce_admin_order_data_after_billing_address', 'wptemy_display_custom_field_in_admin_order', 10, 1);
function wptemy_display_custom_field_in_admin_order($order) {
    $instructions = get_post_meta($order->get_id(), 'wptemy_delivery_instructions', true);
    if ( $instructions ) {
        echo '<p><strong>Инструкции для курьера:</strong> ' . esc_html($instructions) . '</p>';
    }
}

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

• Перейдите на страницу оформления заказа, убедитесь, что новое поле отображается.
• Попробуйте отправить заказ с заполненным и пустым полем (если оно обязательное) для проверки валидации.
• После оформления заказа зайдите в админку WooCommerce, откройте заказ и проверьте, что данные отображаются в блоке с адресом.

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

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

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

• Используйте sanitize_textarea_field для очистки пользовательских данных перед сохранением.
• Избегайте чрезмерного количества дополнительных полей, чтобы не замедлять процесс оформления заказа.
• Для сложных полей (например, селекты или даты) используйте встроенные типы WooCommerce, чтобы обеспечить совместимость.
• Тестируйте добавленные поля на разных устройствах и браузерах, чтобы избежать проблем с отображением.

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