wppartner.ru wordpress WP Partner

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

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

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

Какие хуки нужны для изменения формы оплаты WooCommerce

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

  • woocommerce_checkout_fields — фильтр для добавления, изменения и удаления любых полей формы;
  • woocommerce_after_order_notes — экшен для вывода HTML после блока заметок;
  • woocommerce_checkout_process — экшен для валидации введённых данных;
  • woocommerce_checkout_update_order_meta — экшен для сохранения данных в метаданные заказа;
  • woocommerce_admin_order_data_after_billing_address — экшен для отображения данных в админке заказа.

Пошаговое решение: добавляем новое поле "Номер телефона для связи" в форму оплаты

1. Добавление поля в форму с помощью фильтра woocommerce_checkout_fields

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['billing']['billing_phone_contact'] = array(
        'type'        => 'tel',
        'label'       => 'Номер телефона для связи',
        'required'    => true,
        'class'       => array('form-row-wide'),
        'priority'    => 25,
        'placeholder' => 'Введите номер телефона',
    );
    return $fields;
});

2. Валидация поля через woocommerce_checkout_process

add_action('woocommerce_checkout_process', function() {
    if (empty($_POST['billing_phone_contact'])) {
        wc_add_notice('Пожалуйста, укажите номер телефона для связи.', 'error');
    }
});

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

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

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

add_action('woocommerce_admin_order_data_after_billing_address', function($order){
    $phone_contact = get_post_meta($order->get_id(), '_billing_phone_contact', true);
    if ($phone_contact) {
        echo '<p><strong>Номер телефона для связи:</strong> ' . esc_html($phone_contact) . '</p>';
    }
});

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

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

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

  • Поле не отображается: Проверьте, что код добавлен в functions.php темы или в плагин, активирован и нет синтаксических ошибок.
  • Валидация не срабатывает: Убедитесь, что используется правильный хук woocommerce_checkout_process, и проверяйте именно $_POST['billing_phone_contact'].
  • Данные не сохраняются: Проверьте, что в woocommerce_checkout_update_order_meta используется корректный ключ мета и вызов update_post_meta с нормальной фильтрацией.
  • Данные не видны в админке: Убедитесь, что хук woocommerce_admin_order_data_after_billing_address правильно добавлен и вывод производится с функцией esc_html.

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

  • Всегда фильтруйте пользовательские данные перед сохранением с помощью sanitize_text_field или более подходящих функций в зависимости от типа поля.
  • Не храните личные данные без необходимости, учитывайте требования GDPR и аналогичных законов.
  • Для быстрого поиска по заказам добавляйте мета-ключи с префиксом _billing_, как в стандартных полях WooCommerce.
  • Избегайте перегрузки формы лишними полями — это влияет на удобство пользователя и скорость загрузки страницы.

Сравнение способов добавления поля: плагин против кода

МетодПреимуществаНедостатки
Код через хуки (пример выше)Быстрая кастомизация, контроль, отсутствие лишних плагиновТребует знаний PHP и WordPress API, риск ошибок при неправильном коде
Плагин для кастомизации формы (например, Checkout Field Editor)Удобный интерфейс, быстрая настройка без кодаДополнительная нагрузка на сайт, ограниченная гибкость, иногда платный функционал
×

AI-плагин

WPGPT
Сам создает статьи для вашего сайта WordPress

SEO и мета-теги

Парсинг конкурентов

Изображения

Комментарии

Подробнее