Кастомизация полей оформления заказа WooCommerce без плагинов: пошаговое руководство

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

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

Диагностика: как понять, что поля оформления заказа нужно изменить

Проверьте, соответствуют ли текущие поля следующим требованиям:

• Все обязательные поля для вашего бизнеса есть и корректно валидируются.
• Нет лишних или неактуальных полей, которые могут отпугнуть покупателей.
• Дополнительные данные, необходимые для маркетинга или логистики, собираются.

Если вы заметили, что важные поля отсутствуют или данные собираются недостаточно эффективно, нужно кастомизировать форму оформления заказа.

Пошаговое решение: добавление, изменение и удаление полей в WooCommerce checkout

1. Удаление стандартных полей

Чтобы убрать ненужные поля, используйте фильтр woocommerce_checkout_fields. Например, чтобы убрать поле «Компания» и «Адрес 2» (address_2):

add_filter('woocommerce_checkout_fields', 'custom_remove_checkout_fields');
function custom_remove_checkout_fields($fields) {
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_address_2']);
    return $fields;
}

2. Добавление нового поля

Добавим поле «Номер налогоплательщика» (TIN) для биллинга:

add_filter('woocommerce_checkout_fields', 'custom_add_checkout_field');
function custom_add_checkout_field($fields) {
    $fields['billing']['billing_tin'] = array(
        'type'        => 'text',
        'label'       => 'ИНН',
        'placeholder' => 'Введите ИНН',
        'required'    => false,
        'class'       => array('form-row-wide'),
        'priority'    => 120,
    );
    return $fields;
}

3. Валидация нового поля

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

add_action('woocommerce_checkout_process', 'custom_validate_checkout_field');
function custom_validate_checkout_field() {
    if (!empty($_POST['billing_tin']) && !preg_match('/^\d{10,12}$/', $_POST['billing_tin'])) {
        wc_add_notice(__('Введите корректный ИНН (10 или 12 цифр).'), 'error');
    }
}

4. Сохранение нового поля в заказе

Для сохранения введенного значения используйте хук woocommerce_checkout_update_order_meta:

add_action('woocommerce_checkout_update_order_meta', 'custom_save_checkout_field');
function custom_save_checkout_field($order_id) {
    if (!empty($_POST['billing_tin'])) {
        update_post_meta($order_id, '_billing_tin', sanitize_text_field($_POST['billing_tin']));
    }
}

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

Чтобы видеть новое поле в админке WooCommerce (детали заказа), добавьте:

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

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

• Перейдите на страницу оформления заказа и убедитесь, что новые поля отображаются или удалённые исчезли.
• Попробуйте отправить форму с некорректным ИНН — должна появиться ошибка.
• Оформите заказ с заполненным ИНН и проверьте, что значение отображается в админке заказа.
• Проверьте на разных устройствах и браузерах, что поля корректно отображаются и работают.

Частые ошибки при кастомизации полей WooCommerce и как их исправлять

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

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

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

Сравнение способов кастомизации полей WooCommerce