Como criar o código de acesso da página de logout do WooCommerce

Publicados: 2020-08-22

Código curto da página de logout do WooCommerce Deseja criar um código de acesso da página de logout do WooCommerce que você possa usar em qualquer lugar do seu site WooCommerce? Se você estiver procurando por um exemplo rápido que realmente funcione de shortcode da página de logout do WooCommerce , este exemplo tornará mais fácil para você entender como fazer isso.

O uso de códigos de acesso torna mais fácil para os proprietários de lojas WooCommerce personalizar rapidamente seus sites sem codificação ou com habilidades mínimas de codificação.

Hoje, vou compartilhar com você uma maneira rápida, fácil e brilhante de criar um código de acesso da página de logout do WooCommerce e implantá-lo em qualquer lugar do seu site e, com um clique de botão, seus usuários são desconectados.

Como de costume, vou ilustrar passo a passo explicando como meu código funciona para facilitar a adição do código ao tema da sua loja. Se você é um novo desenvolvedor do WordPress ou um desenvolvedor iniciante do WooCommerce

Ponto de extremidade de logout do WooCommerce

Por padrão, o WooCommerce fornece aos usuários um endpoint padrão para logout que pode ser usado para criar URLs de logout e você pode acessá-lo nas configurações do WooCommerce, conforme compartilhado na imagem abaixo:

Ponto de extremidade de logout do WooCommerce

Você pode personalizar esse endpoint de acordo com sua preferência, conforme explicado neste artigo – Personalizando os endpoints do WooCommerce.

Além do endpoint de logout do WooCommerce, existem vários outros endpoints que você pode usar para personalizar seus URLs do WooCommerce e incluem os endpoints da página Checkout e da página Minha conta:

Pontos de extremidade do Google Checkout

Os pontos de extremidade a seguir são usados ​​para funcionalidades relacionadas ao checkout e são anexados à URL da página /checkout:

  • Página de pagamento – /order-pay/{ORDER_ID}
  • Pedido recebido (obrigado) – /order-received/
  • Adicionar método de pagamento – /add-payment-method/
  • Excluir método de pagamento – /delete-payment-method/
  • Definir método de pagamento padrão – /set-default-payment-method/

Pontos de extremidade da conta

Os seguintes endpoints são usados ​​para funcionalidades relacionadas à conta e são anexados ao URL da página /my-account:

  • Encomendas – /orders/
  • Ver pedido – /view-order/{ORDER_ID}
  • Downloads – /downloads/
  • Editar conta (e alterar senha) – /edit-account/
  • Endereços – /edit-address/
  • Métodos de pagamento – /payment-methods/
  • Senha perdida – /lost-password/
  • Logout – /customer-logout/

Criar shortcode da página de logout do WooCommerce

Vamos usar o endpoint de logout do WooCommerce para fazer logout do usuário e adicionar o código ao botão shortcode.

O endpoint de logout do WooCommerce é – /customer-logout/ adicionaremos um URL attribute =true para criar o URL de logout que usaremos no botão de logout.

A estrutura de URL completa deve ser a seguinte site_url/?logout-endpoint=true

Criar shortcode de logout do WooCommerce

Se você não criou o shortcode do WordPress ou WooCommerce antes, tenho um ótimo guia que escrevi para ajudá-lo a aprender como criar o shortcode do WordPress. - Confira aqui.

Vamos agora criar o shortcode da página de logout do WooCommerce passo a passo:

  • Etapa 1 : Crie o gancho de ação e as funções de retorno de chamada para o código de acesso da página de logout – por exemplo, você pode criá-lo da seguinte forma : add_shortcode( 'wc_logout_shortcode', 'njengah_wc_logout_shortcode' ); . A função de retorno de chamada também pode ser criada da seguinte forma: function njengah_wc_logout_shortcode(){ }
  • Passo 2: Verifique se o usuário está logado usando o código que compartilhei neste tutorial em – como verificar se o usuário está logado no WordPress: if (is_user_logged_in())
  • Etapa 3: crie a variável de URL de logout e você pode criar a partir do endpoint WooCommerce da seguinte forma: $wc_shortcode_logout_url = site_url() . '/?customer-logout=true'; $wc_shortcode_logout_url = site_url() . '/?customer-logout=true';
  • Etapa 4: Crie o código do botão e adicione uma classe para que você possa estilizá-la rapidamente para se adequar ao esquema de cores do seu tema WooCommerce. <button class="wc_logout_shortcode_btn"><a href="<?php echo $wc_shortcode_logout_url; ?>">Log Out</a></button>
  • Passo 5: Junte este código e adicione o código ao seu tema através do arquivo functions.php ou você pode incluir o código no desenvolvimento do seu plugin WooCommerce personalizado. adicionar shortcode ao functions.php woocommerce
  • Etapa 6: teste o shortcode [wc_logout_shortcode] em qualquer lugar em uma página ou postagem ou até mesmo em um widget do WordPress que suporte códigos de acesso e você deverá ver o botão de logout do WooCommerce exibido onde você adiciona o shortcode.

A seguir está o trecho de código completo que você pode adicionar ao functions.php para criar o shortcode da página de logout do WooCommerce:

 /**
 * Adicione um botão de código de acesso da página de logout do WooCommerce
 */

// Gancho de ação de código de acesso 

add_shortcode( 'wc_logout_shortcode', 'njengah_wc_logout_shortcode');

// Ligar de volta 

function njengah_wc_logout_shortcode(){
	
    ob_start();
    // Verifica se o usuário está logado 
    if (is_user_logged_in()){ 
          // Cria a variável url 
	   $wc_shortcode_logout_url = site_url() . '/?customer-logout=true';?>
	    <button class="wc_logout_shortcode_btn"><a href="<?php echo $wc_shortcode_logout_url; ?>">Sair</a></button> 
        <?php 
	}

    return ob_get_clean();
}

Agora você pode testar o shortcode adicionando-o a uma nova página ou postagem, conforme mostrado na imagem abaixo, e você deverá ver o botão exibido no frontend.

shortcode da página de logout do woocommerce

Teste o botão de atalho de logout do WooCommerce na página

Por fim, no frontend você deve testar o botão de logout e ver se funciona conforme mostrado na imagem abaixo. Se você seguiu todas as etapas, o shortcode de logout do WooCommerce deve funcionar conforme mostrado no meu exemplo abaixo:

exemplo de código de acesso de logout do woocommerce

Conclusão

Neste post, compartilhei com você como criar um shortcode para a funcionalidade de logout do WooCommerce. Se você quiser sair sem a mensagem de confirmação, escrevi um bom guia sobre como você pode remover a mensagem de confirmação de logout do WooCommerce.

Em um resumo rápido, para criar o shortcode de logout do WooCommerce, você precisa aproveitar o ponto de extremidade de logout padrão do WooCommerce. Você também pode alterar esse URL de endpoint para qualquer variável que desejar e adicioná-lo ao seu código e funcionará!

Artigos semelhantes

  1. Como definir produtos em destaque no WooCommerce
  2. Como ocultar todos os produtos da página da loja no WooCommerce
  3. 23 melhores plugins WooCommerce para personalização da página de checkout
  4. Como redirecionar o usuário se não estiver logado no WordPress » Redirecionamento de página
  5. Maneiras de remover a barra lateral da página do produto em temas WooCommerce
  6. WooCommerce Logout sem confirmação: Como remover “Tem certeza de que deseja sair?”
  7. Como adicionar o ícone de remoção à página de checkout do WooCommerce
  8. Como obter o ID do pedido no Woocommerce
  9. Como verificar se o plugin está ativo no WordPress [3 MANEIRAS]
  10. Como usar códigos de acesso do WordPress em páginas ou postagens com exemplo
  11. Redirecionamento do WooCommerce após o checkout : Como redirecionar automaticamente para uma página personalizada após o checkout
  12. Como obter URLs de página do WooCommerce » Carrinho, loja, checkout e conta
  13. Como obter o ID da postagem pelo Slug no WordPress com um exemplo prático
  14. Como adicionar a página de checkout do WooCommerce da imagem do produto
  15. Como redimensionar imagens de produtos WooCommerce
  16. Como remover foi adicionado ao seu carrinho Mensagem WooCommerce
  17. Como alterar o ícone do PayPal na página de checkout do WooCommerce
  18. Como redimensionar imagens de produtos WooCommerce
  19. Como ocultar o ícone do PayPal na página de checkout do WooCommerce
  20. Como adicionar texto antes do preço no WooCommerce » Adicionar texto antes do preço