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

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

Форма оформления заказа в WooCommerce — ключевой элемент, влияющий на конверсию и удобство пользователей. Прямое изменение шаблонов темы не рекомендуется, так как при обновлениях они будут перезаписаны. Правильное решение — использовать хуки (actions и filters). Они позволяют добавить, изменить или убрать поля без изменения исходного кода плагина.

Диагностика проблемы: что делать, если стандартная форма оформления заказа не подходит

Если стандартные поля не соответствуют требованиям бизнеса (например, нужно добавить поле для ИНН, изменить порядок полей или скрыть ненужные), то прямое редактирование шаблонов рискованно. Важно понять, какие именно поля нужно изменить и как их добавить без нарушения логики WooCommerce.

Определяем, какие хуки применимы

• woocommerce_checkout_fields — фильтр для изменения массива полей формы;
• woocommerce_before_checkout_form и woocommerce_after_checkout_form — actions для вставки дополнительного HTML перед или после формы;
• woocommerce_checkout_process — action для валидации новых полей;
• woocommerce_checkout_update_order_meta — action для сохранения данных новых полей в заказе;
• woocommerce_admin_order_data_after_billing_address — action для отображения новых полей в админке заказа.

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

1. Добавляем поле в форму через фильтр woocommerce_checkout_fields:

add_filter('woocommerce_checkout_fields', 'add_custom_checkout_field_inn');
function add_custom_checkout_field_inn($fields) {
    $fields['billing']['billing_inn'] = array(
        'type'        => 'text',
        'label'       => __('ИНН', 'woocommerce'),
        'placeholder' => _x('Введите ИНН', 'placeholder', 'woocommerce'),
        'required'    => true,
        'clear'       => false,
        'priority'    => 120,
    );
    return $fields;
}

2. Проверяем ввод — добавляем валидацию на обязательность и формат ИНН:

add_action('woocommerce_checkout_process', 'validate_custom_checkout_field_inn');
function validate_custom_checkout_field_inn() {
    if (empty($_POST['billing_inn'])) {
        wc_add_notice(__('Пожалуйста, введите ИНН.'), 'error');
    } elseif(!preg_match('/^\d{10}|\d{12}$/', $_POST['billing_inn'])) {
        wc_add_notice(__('Введите корректный ИНН из 10 или 12 цифр.'), 'error');
    }
}

3. Сохраняем введённое значение в мета-данные заказа:

add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkout_field_inn');
function save_custom_checkout_field_inn($order_id) {
    if (!empty($_POST['billing_inn'])) {
        update_post_meta($order_id, '_billing_inn', sanitize_text_field($_POST['billing_inn']));
    }
}

4. Отображаем ИНН в админке заказа для удобства менеджера:

add_action('woocommerce_admin_order_data_after_billing_address', 'display_custom_checkout_field_inn_admin_order', 10, 1);
function display_custom_checkout_field_inn_admin_order($order){
    $inn = get_post_meta($order->get_id(), '_billing_inn', true);
    if ($inn) {
        echo '<p><strong>' . __('ИНН') . ':</strong> ' . esc_html($inn) . '</p>';
    }
}

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

• Открыть страницу оформления заказа и проверить наличие нового поля «ИНН»;
• Попытаться отправить заказ без заполнения поля — должна появиться ошибка;
• Ввести некорректный ИНН — ошибка валидации;
• Отправить корректный заказ, перейти в админку WooCommerce, открыть заказ и убедиться, что ИНН отображается.

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

• Поле не отображается на странице оформления заказа. Проверьте, что код добавлен в functions.php активной темы или в плагин. Убедитесь, что используется правильный фильтр woocommerce_checkout_fields.
• Валидация не работает или не выводит ошибки. Ошибки валидации должны регистрироваться через wc_add_notice с типом error. Проверьте, что хук woocommerce_checkout_process подключён правильно.
• Данные не сохраняются в заказе. Проверьте, что сохраняете данные через woocommerce_checkout_update_order_meta и используете правильный ключ мета-поля.
• Данные не отображаются в админке. Убедитесь, что используете хук woocommerce_admin_order_data_after_billing_address и правильно получаете мета-значение.

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

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

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