Hướng dẫn thêm Confirm Password trong Registration Page và Checkout Page

25 Tháng 6, 2024

(1 đánh giá)

Bạn đang tìm cách ngăn chặn lỗi nhập sai mật khẩu khi đăng ký tài khoản hoặc tạo tài khoản trong quá trình thanh toán trên WooCommerce? Việc thêm Confirm Password trong Registration Page và Checkout Page là một giải pháp hiệu quả để cải thiện trải nghiệm người dùng và tăng cường bảo mật. Bài viết này Gini Webseo sẽ hướng dẫn bạn cách thực hiện nhanh chóng bằng cách chỉnh sửa file functions.php, giúp khách hàng nhập mật khẩu chính xác ngay từ đầu

Tại sao cần thêm trường xác nhận mật khẩu?

Tình trạng spam tài khoản, hay khách hàng không nghiêm túc trong việc tạo tài khoản để spam đơn hàng. Mình khuyến khích các bạn thêm một field nhập nữa là “Nhập lại mật khẩu”.

Khá là đơn giản, bạn chỉ cần việc copy các đoạn sau đây vào file function.php là được. Ở đây có 2 trường hợp, Gini Webseo sẽ tách ra làm 2 giúp các bạn dễ hiểu.

Thêm Confirm Password trong Registration Page

WooCommerce không có sẵn tính năng xác nhận mật khẩu trong quá trình đăng ký. Do đó, chúng ta cần thêm một đoạn mã để kiểm tra nếu hai trường mật khẩu có khớp nhau không.

Chèn đoạn code sau vào file functions.php của theme bạn đang sử dụng:

<?php
// ----- Kiểm tra password ở trang đăng ký Woocommerce
function registration_errors_validation($reg_errors, $sanitized_user_login, $user_email) {
    global $woocommerce;
    extract( $_POST );
    if ( strcmp( $password, $password2 ) !== 0 ) {
        return new WP_Error( 'registration-error', __( 'Mật khẩu không trùng nhau.', 'woocommerce' ) );
    }
    return $reg_errors;
}
add_filter('woocommerce_registration_errors', 'registration_errors_validation', 10,3);
// ----- Thêm field Nhập lại mật khẩu ở trang đăng ký Woocommerce
function wc_register_form_password_repeat() {
    ?>
    <p class="form-row form-row-wide">
        <label for="reg_password2"><?php _e( 'Nhập lại mật khẩu', 'woocommerce' ); ?> <span class="required">*</span></label>
        <input type="password" class="input-text" name="password2" id="reg_password2" value="<?php if ( ! empty( $_POST['password2'] ) ) echo esc_attr( $_POST['password2'] ); ?>" />
    </p>
    <?php
}
add_action( 'woocommerce_register_form', 'wc_register_form_password_repeat' );

Bây giờ, khi người dùng đăng ký tài khoản, họ sẽ phải nhập lại mật khẩu để đảm bảo không bị sai sót.

Thêm Confirm Password trong Checkout Page

Nếu bạn cho phép khách hàng tạo tài khoản khi thanh toán, hãy kiểm tra xem họ có nhập đúng mật khẩu và sau đó để hiển thị trường “Nhập lại mật khẩu” trong quá trình thanh toán bằng đoạn code sau:

// ----- Kiểm tra password ở trang thanh toán Woocommerce
function lit_woocommerce_confirm_password_validation( $posted ) {
    $checkout = WC()->checkout;
    if ( ! is_user_logged_in() && ( $checkout->must_create_account || ! empty( $posted['createaccount'] ) ) ) {
        if ( strcmp( $posted['account_password'], $posted['account_confirm_password'] ) !== 0 ) {
            wc_add_notice( __( 'Mật khẩu không trùng nhau.', 'woocommerce' ), 'error' ); 
        }
    }
}
add_action( 'woocommerce_after_checkout_validation', 'lit_woocommerce_confirm_password_validation', 10, 2 );
// ----- Thêm field Nhập lại mật khẩu ở trang thanh toán Woocommerce
function lit_woocommerce_confirm_password_checkout( $checkout ) {
    if ( get_option( 'woocommerce_registration_generate_password' ) == 'no' ) {
        $fields = $checkout->get_checkout_fields();
        $fields['account']['account_confirm_password'] = array(
            'type'              => 'password',
            'label'             => __( 'Nhập lại mật khẩu', 'woocommerce' ),
            'required'          => true,
            'placeholder'       => _x( 'Nhập lại mật khẩu', 'placeholder', 'woocommerce' )
        );
        $checkout->__set( 'checkout_fields', $fields );
    }
}
add_action( 'woocommerce_checkout_init', 'lit_woocommerce_confirm_password_checkout', 10, 1 );

Lợi ích của việc thêm Confirm Password trong WooCommerce

Khi bạn thực hiện các bước trên, khách hàng sẽ phải nhập lại mật khẩu khi đăng ký tài khoản hoặc khi tạo tài khoản trong quá trình thanh toán. Điều này mang lại nhiều lợi ích:

Giảm thiểu lỗi nhập sai mật khẩu, tránh việc người dùng phải đặt lại mật khẩu ngay sau khi đăng ký.
Tăng cường bảo mật, ngăn chặn tài khoản spam hoặc người dùng tạo tài khoản vô ý thức.
Cải thiện trải nghiệm người dùng, giúp họ xác nhận chính xác thông tin trước khi hoàn tất đăng ký.
Hạn chế các vấn đề hỗ trợ liên quan đến quên mật khẩu.

Thêm Confirm Password trong Registration Page và Checkout Page là một cách đơn giản nhưng hiệu quả để đảm bảo tính chính xác và bảo mật khi người dùng tạo tài khoản trên WooCommerce. Chỉ với một vài dòng code trong functions.php, bạn có thể nâng cao trải nghiệm người dùng và giảm thiểu các lỗi phổ biến liên quan đến mật khẩu.

Nếu bạn gặp bất kỳ vấn đề nào khi triển khai, hãy để lại bình luận bên dưới để Gini Webseo có thể hỗ trợ bạn tốt nhất!