WooCommerce: как добавить поле для подтверждения номера телефона на этапе оформления заказа

Какая задача решается добавлением поля подтверждения номера телефона в WooCommerce?

Часто в интернет-магазинах на WooCommerce требуется не просто получить номер телефона клиента, но и убедиться в его корректности. Для этого на этапе оформления заказа добавляют дополнительное поле для подтверждения номера — клиент вводит номер дважды, и система проверяет совпадение. Это снижает количество ошибок в заказах и улучшает качество связи с покупателем.

Диагностика: почему стандартного поля телефона недостаточно?

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

Если магазин активно использует SMS-уведомления или звонки, неверный номер приводит к потерям и дополнительной работе саппорта.

Пошаговое решение: добавляем поле подтверждения номера телефона

1. Добавление второго поля «Подтвердите номер телефона»

В файл functions.php или в кастомный плагин добавляем следующий код, который выведет новое поле после стандартного телефона:

add_filter('woocommerce_checkout_fields', 'add_phone_confirmation_field');
function add_phone_confirmation_field($fields) {
    $fields['billing']['billing_phone_confirm'] = array(
        'type'        => 'tel',
        'label'       => __('Подтвердите номер телефона', 'woocommerce'),
        'required'    => true,
        'priority'    => 25,
        'class'       => array('form-row-wide'),
        'autocomplete'=> 'tel',
    );
    return $fields;
}

2. Валидация совпадения телефона и подтверждения

Добавим проверку при отправке формы:

add_action('woocommerce_checkout_process', 'validate_phone_confirmation_field');
function validate_phone_confirmation_field() {
    if (isset($_POST['billing_phone']) && isset($_POST['billing_phone_confirm'])) {
        $phone = sanitize_text_field($_POST['billing_phone']);
        $phone_confirm = sanitize_text_field($_POST['billing_phone_confirm']);
        if ($phone !== $phone_confirm) {
            wc_add_notice(__('Номера телефона не совпадают. Пожалуйста, проверьте введённые данные.'), 'error');
        }
    }
}

3. Сохранение подтверждающего поля в метаданные заказа (опционально)

Если нужно сохранить подтверждающий номер (для отладки или анализа), добавьте:

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

4. Отображение подтверждающего номера телефона в админке заказа (опционально)

add_action('woocommerce_admin_order_data_after_billing_address', 'display_phone_confirmation_admin_order', 10, 1);
function display_phone_confirmation_admin_order($order) {
    $phone_confirm = get_post_meta($order->get_id(), '_billing_phone_confirm', true);
    if ($phone_confirm) {
        echo '<p><strong>Подтверждённый номер телефона:</strong> ' . esc_html($phone_confirm) . '</p>';
    }
}

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

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

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

• Поле не отображается на странице оформления заказа. Проверьте, что код добавлен в functions.php активной темы или в рабочий плагин. Кэш сайта и браузера может мешать — очистите кэш.
• Ошибка валидации не появляется. Убедитесь, что хуки woocommerce_checkout_process и фильтр woocommerce_checkout_fields правильно подключены и не конфликтуют с другими плагинами.
• Пользователь жалуется на неудобство ввода. Можно добавить атрибут pattern и плейсхолдеры для подсказки формата номера телефона.

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

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

Сравнение вариантов реализации