WooCommerce: как добавить поле подтверждения пароля в форму регистрации

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

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

Как добавить поле подтверждения пароля в форму регистрации WooCommerce

Решение требует двух шагов: добавление нового поля в форму и проверка совпадения паролей при отправке формы.

1. Добавляем поле подтверждения пароля

Для этого используем хук woocommerce_register_form. Добавим HTML-код поля прямо в форму регистрации:

add_action('woocommerce_register_form', 'add_password_confirmation_field');
function add_password_confirmation_field() {
    ?>
    <p class="form-row form-row-wide">
        <label for="reg_password2"><?php _e( 'Подтверждение пароля', 'woocommerce' ); ?> <span class="required">*</span></label>
        <input type="password" class="input-text" name="password2" id="reg_password2" autocomplete="new-password" />
    </p>
    <?php
}

2. Проверяем совпадение паролей при регистрации

Для валидации используется фильтр woocommerce_registration_errors. Здесь нужно получить оба пароля из $_POST и сравнить их.

add_filter('woocommerce_registration_errors', 'validate_password_confirmation_field', 10, 3);
function validate_password_confirmation_field($errors, $username, $email) {
    if (isset($_POST['password']) && isset($_POST['password2'])) {
        if ($_POST['password'] !== $_POST['password2']) {
            $errors->add('password_mismatch', __('Пароли не совпадают.', 'woocommerce'));
        }
    }
    return $errors;
}

3. Сохраняем пароль из первого поля

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

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

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

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

• Поле не отображается в форме. Проверьте, что код добавлен в файл functions.php активной темы или подключенного плагина. Убедитесь, что хук woocommerce_register_form не переопределен темой.
• При валидации не срабатывает проверка совпадения. Проверьте, что имена полей совпадают (password и password2) и что данные передаются через POST.
• Ошибка перевода текста. Используйте функцию __() или _e() с правильным текстовым доменом WooCommerce.
• Пароль не сохраняется. Убедитесь, что поле подтверждения не влияет на поле с паролем — сохраняется только password.

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

• Используйте атрибут autocomplete="new-password" для полей ввода пароля, чтобы браузеры не подставляли старые значения.
• Не храните поле подтверждения пароля в базе — его задача только проверить совпадение на клиенте и сервере.
• Для дополнительной проверки добавьте JavaScript в форму, который будет проверять совпадение паролей до отправки.
• Если у вас много кастомизаций WooCommerce, вынесите этот код в отдельный плагин, чтобы не потерять при смене темы.

Дополнительно: пример клиентской проверки совпадения паролей с помощью JS

add_action('woocommerce_register_form', 'add_password_confirmation_js');
function add_password_confirmation_js() {
    ?>
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var form = document.querySelector('form.woocommerce-form-register');
        if (!form) return;
        form.addEventListener('submit', function(e) {
            var password = document.getElementById('reg_password').value;
            var confirm = document.getElementById('reg_password2').value;
            if(password !== confirm) {
                e.preventDefault();
                alert('Пароли не совпадают.');
            }
        });
    });
    </script>
    <?php
}

Сравнение вариантов решения