2 maneiras fáceis de ativar o login do número de telefone no WooCommerce

O login por número de telefone é um recurso útil projetado para aprimorar a experiência do usuário e facilitar o processo de login e registro. Portanto, muitos usuários do WooCommerce desejam implementar esse recurso em suas lojas online.

Se você é uma dessas pessoas, então você caiu na página certa. Este artigo ensinará como permitir que os usuários façam login e se registrem com seu número de telefone WooCommerce de duas maneiras.

Por que você deve habilitar o login do número de telefone WooCommerce em sua loja?

O registro e o login por telefone tornaram-se extremamente úteis para as lojas WooCommerce que dependem muito dos números de celular dos clientes. Por exemplo, entrega de comida, táxis, etc.

Além desses nichos específicos, abaixo estão algumas vantagens que beneficiam qualquer negócio.

• Os compradores podem fazer login e se registrar diretamente com seu número de telefone em sua loja WooCommerce.
• Evita spam de cadastro de clientes em sua loja virtual.
• Os compradores também podem fazer login sem lembrar seu nome de usuário e senha.
• Você pode verificar os números de telefone dos clientes por SMSs OTP.
• Todos os clientes verificados são genuínos e, portanto, evitam pedidos falsos.
• Seus clientes podem ser notificados rapidamente por meio de dispositivos móveis, mesmo que não tenham acesso à internet.
• Você pode alcançar rapidamente seus clientes com promoções e ofertas por meio de seus números de telefone.

Com essas vantagens, você pode facilmente aprimorar sua estratégia de negócios e, eventualmente, seu crescimento de consumo. Você tem tudo o que precisa para se comunicar com seus clientes da maneira mais simples e concreta.

#1: Habilite o login do número de telefone na sua loja WooCommerce com um plug-in

Existem vários plugins que podem ajudá-lo com isso. Por exemplo:

• Registro e login com número de celular
• Dígitos: Número de telefone móvel do WordPress Formulário de inscrição e login OTP
• Login com número de celular para WooCommerce

Mas neste tutorial, usaremos o plugin “Login com número de telefone”, pois é o mais popular gratuito.

Instale o plug-in Ativar o “ Login com número de telefone ” na sua loja WooCommerce

A primeira coisa que você precisa fazer é instalar e ativar o plugin “ Login com número de telefone ” em sua loja WooCommerce . Abaixo estão as instruções.

1. Em primeiro lugar, no painel do WordPress, navegue até a página Plugins > Adicionar novo .

2. Digite “Login com número de telefone” na caixa de pesquisa no canto superior direito.
3. O plugin deve aparecer primeiro na lista. Clique no botão Instalar agora que é exibido ao lado de seu título.
4. Depois disso, o plugin será baixado. Uma vez feito, você verá o botão Instalar agora mudar para o botão Ativar . Clique.

Criar uma nova página de login/registro

O próximo passo é inserir o shortcode do plugin em uma nova página de login/registro.

1. Navegue até Página > Adicionar novo no painel do WordPress.

2. Escolha um título para a nova página, por exemplo, “ Página de Login/Registro ”.

3. Coloque o shortcode [idehweb_lwp] dentro dele.
4. Publique a página.

Receba 10.000 SMS OTP grátis por mês com o Firebase

Quando um novo usuário registra uma conta em sua loja WooCommerce, um código de verificação será enviado para seu número de celular. Portanto, você precisará fornecer um gateway SMS para que o plug-in funcione corretamente.

Você pode usar o Firebase do Google. Ele fornece 10.000 SMSs OTP por mês gratuitamente. Aqui está como:

1. Faça login no console do Firebase usando sua conta do Google.
2. Clique no botão Criar um projeto .

3. Agora, você precisará inserir um nome para o novo projeto, aceitar os termos e condições do Firebase e clicar no botão Criar projeto .
4. Depois que o projeto for criado com sucesso, na barra lateral esquerda, vá para a página Build > Authentication .

5. Clique no botão Começar .
6. Escolha Telefone como provedor.

7. Alterne a alternância no canto superior direito para ativar esta opção. Em seguida, clique no botão Salvar .

8. Role para baixo até a seção Domínios autorizados . Clique no botão Adicionar domínio e insira o nome de domínio da sua loja WooCommerce. Em seguida, clique no botão Adicionar .

9. Agora, vá para a guia Modelos .

10. Clique no ícone de lápis ao lado do texto do idioma do modelo . Em seguida, escolha o idioma que você prefere que seja usado para verificação por SMS.

11. Clique no ícone de engrenagem ao lado do texto Visão geral do projeto e escolha Configurações do projeto .

12. Role para baixo até as seções de seus aplicativos . Em seguida, clique no ícone da web.

13. Insira um apelido para seu novo aplicativo. Em seguida, clique no botão Registrar aplicativo .

14. Escolha a opção Usar uma tag <script> e copie os scripts fornecidos.

15. Agora, vá para o painel do WordPress da sua loja WooCommerce. Em seguida, visite a página "configuração de login".

16. Cole os scripts na caixa de texto de configuração do Firebase .
17. De volta à janela do Firebase, copie a chave de API fornecida nos scripts.

18. De volta à janela do WordPress, cole a chave da API na caixa de texto da API do Firebase .

19. Por fim, role para baixo até a parte inferior da página e clique no botão Salvar alterações .

Além disso, é aqui que você pode configurar o aplicativo. Você deve verificar as configurações para ver se há mais alguma coisa que você precise ajustar.

#2: Habilite o login do número de telefone na sua loja WooCommerce programaticamente

Neste tutorial, adicionaremos mais uma opção de número de telefone no formulário de login da sua loja WooCommerce. Observe que isso não envia SMSs OTP para verificar os usuários, como no tutorial anterior.

Os usuários podem escolher o que for mais conveniente para eles. Você pode ter visto isso no formulário de login da Amazon. Ele permite que os usuários entrem com um e-mail ou número de telefone.

Você precisará adicionar um código PHP personalizado ao arquivo “functions.php” do tema atualmente ativo. Caso não saiba como fazê-lo, siga as instruções abaixo:

1. Navegue até a página Aparência > Editor de arquivo de tema no painel do WordPress.

2. Escolha o tema que você está usando no canto superior direito.
3. Acesse o arquivo “functions.php” na barra lateral direita.

Adicionar entrada de número de telefone

Para habilitar o login do número de telefone WooCommerce em seu site de comércio eletrônico WordPress, você precisa armazenar os números de telefone dos usuários na tabela “wp_usermeta”.

Isso pode ser feito no momento do registro do usuário. Você pode usar o código abaixo para atingir esse objetivo.

 <?php $user_id = 1; // pass user id $phone_number = 9999999999; add_user_meta( $user_id, 'user_phone', $phone_number);

Depois de ter uma meta_key “user_phone” com seu valor, você pode verificar as credenciais do usuário com um número de telefone.

Criar um formulário de login

Agora, vamos criar um formulário de login simples onde os usuários podem inserir seus detalhes de login. Terá os seguintes elementos:

• Um campo de texto para inserir um nome de usuário/e-mail/telefone
• Um campo de texto para inserir uma senha
• Um nonce para evitar ataques CSRF (é um campo oculto)
• Um botão de envio

 <?php $return = log_the_user_in(); if( is_wp_error( $return ) ) { echo $return->get_error_message(); } ?> <form method="post"> <p><input type="text" name="user_login" placeholder="Username, email or mobile" required /></p> <p><input type="password" name="user_password" placeholder="Password" required /></p> <input type="hidden" name="login_nonce" value="<?php echo wp_create_nonce('login_nonce'); ?>" /> <input type="submit" name="btn_login" value="Submit" /> </form>

Nos scripts acima, adicionamos código HTML e também chamamos o método “log_the_user_in()”. Este é responsável por verificar as credenciais do usuário.

Se ocorrerem alguns erros no lado do servidor, informaremos o usuário através do método “get_error_message()”.

Na próxima etapa, precisaremos definir o método “log_the_user_in()” e retornar o erro.

Faça login com números de telefone no WooCommerce

Quando um usuário preenche as credenciais e clica no botão enviar, obteremos as credenciais e as verificaremos no banco de dados.

Se tudo corresponder, faremos o login e os redirecionaremos para a página inicial. Para logins falsos, os erros serão registrados usando a classe “WP_Error”. Com base em suas necessidades, você pode alterá-lo para qualquer outra página alterando o código.

Vamos definir o método “log_the_user_in()” no gancho “init”. Este gancho é acionado após o carregamento do WordPress, mas antes de qualquer cabeçalho ser enviado. Isso é ideal para processar um formulário usando o método POST.

Abaixo segue o código:

 add_action( 'init', 'log_the_user_in' ); function log_the_user_in() { if ( ! isset( $_POST['btn_login'] ) ) return; if ( ! wp_verify_nonce( $_POST['login_nonce'], 'login_nonce' ) ) { return new WP_Error('invalid_data', 'Invalid data.'); } if ( empty( $_POST['user_login'] ) || empty( $_POST['user_password'] ) ) { return new WP_Error('empty', 'Both fields are required.'); } if ( is_email( $_POST['user_login'] ) ) { // check user by email $user = get_user_by( 'email', $_POST['user_login'] ); } elseif ( is_numeric( $_POST['user_login'] ) ) { // check user by phone number global $wpdb; $tbl_usermeta = $wpdb->prefix.'usermeta'; $user_id = $wpdb->get_var( $wpdb->prepare( "SELECT user_id FROM $tbl_usermeta WHERE meta_key=%s AND meta_value=%s", 'user_phone', $_POST['user_login'] ) ); $user = get_user_by( 'ID', $user_id ); } else { // check user by username $user = get_user_by( 'login', $_POST['user_login'] ); } if ( ! $user ) { return new WP_Error('wrong_credentials', 'Invalid credentials.'); } // check the user's login with their password. if ( ! wp_check_password( $_POST['user_password'], $user->user_pass, $user->ID ) ) { return new WP_Error('wrong_credentials', 'Invalid password.'); } wp_clear_auth_cookie(); wp_set_current_user($user->ID); wp_set_auth_cookie($user->ID); wp_redirect(get_bloginfo('url')); exit; }

Aqui, verificamos primeiro o nonce para proteger o formulário de certos tipos de uso indevido, código malicioso e ataques CSRF.

Em seguida, com base no método “is_email()” ou “is_numeric()”, o WordPress verificará se há um e-mail ou número de telefone válido. Se o valor inserido não for um e-mail ou número de telefone, verificaremos um nome de usuário.

Palavras finais

Isso é tudo sobre como adicionar o login do número de telefone em sua loja WooCommerce. Espero que tenha ajudado em seu projeto.

Se você achou este artigo útil, sinta-se à vontade para compartilhar seus pensamentos e sugestões na seção de comentários abaixo.