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

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

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

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

• Частые ошибки с неправильным номером телефона в заказах
• Звонки курьерам с просьбой уточнить контакт
• Плохое качество связи с клиентами из-за опечаток
• Жалобы покупателей на отсутствие возможности проверить номер

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

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

add_filter('woocommerce_checkout_fields', 'add_phone_confirmation_field');
function add_phone_confirmation_field($fields) {
    $fields['billing']['billing_phone_confirm'] = array(
        'type'        => 'tel',
        'label'       => 'Подтверждение номера телефона',
        'required'    => true,
        'placeholder' => 'Введите номер телефона повторно',
        'priority'    => 115,
    );
    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_in_admin', 10, 1);
function display_phone_confirmation_in_admin($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 в заказе, что отображается подтвержденный номер.

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

• Поле не отображается на странице оформления заказа
  Проверьте, что вы используете правильный фильтр woocommerce_checkout_fields и не конфликтуете с другими плагинами, которые модифицируют поля.
• Ошибка сравнения номеров из-за формата
  Убедитесь, что номера телефонов очищаются от лишних символов и пробелов перед сравнением. Можно использовать preg_replace('/\D+/', '', $phone) для удаления всех нецифровых символов.
• Подтвержденный номер не сохраняется
  Проверьте наличие функции update_post_meta и корректность ключа метаданных. Убедитесь, что хук woocommerce_checkout_update_order_meta вызывается.

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

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

Сравнение способов реализации подтверждения номера телефона