Como fazer uma página personalizada da minha conta no WooCommerce
Publicados: 2022-04-14Se você estiver executando uma loja online usando o plug-in WooCommerce, provavelmente está familiarizado com a página Minha conta. Esta é a página que seus clientes veem quando fazem login em suas contas.
Por padrão, esta página é bastante básica, como esta.
Há muito mais potencial e muito mais que você pode fazer com essa parte muito importante da sua loja de comércio eletrônico.
Você pode personalizá-lo para incluir muito mais informações e recursos interessantes para melhorar a experiência do usuário.
Vamos mostrar a você como personalizar a página Minha Conta do WooCommerce e oferecer aos seus clientes uma experiência muito melhor!
Ao seguir estas etapas, você poderá criar uma página Minha conta com aparência profissional, como a abaixo.
Preparar? Vamos começar!
Por que personalizar a página Minha conta no WooCommerce?
A página Minha conta é o painel do seu usuário para gerenciar seus pedidos, verificar downloads, editar seu endereço e editar os detalhes de sua conta.
Uma página Minha conta bem projetada pode fornecer uma melhor experiência de usuário para seus clientes.
Além de ser agradável aos olhos (quem não gosta de coisas bonitas?), esse layout torna o gerenciamento de contas muito mais conveniente.
Aqui estão alguns motivos pelos quais criar uma ótima página Minha conta é vital:
Melhor Satisfação do Cliente
Se você puder fornecer a seus clientes todas as informações de que eles precisam na página Minha conta, é menos provável que eles entrem em contato com você para obter ajuda.
Uma página Minha Conta bem personalizada fará com que seus clientes se sintam mais confortáveis e confiantes ao fazer compras em sua loja.
Melhor retenção de clientes
Personalizar a página Minha conta também pode ajudar a reter clientes.
Se você facilitar o acesso às informações da conta e ao histórico de pedidos, é mais provável que eles continuem comprando com você.
É mais provável que um cliente satisfeito volte.
Devoluções de produtos reduzidas
Quando você melhora a página Minha conta, ela ajuda os clientes a obter todas as informações de que precisam sobre o produto, incluindo detalhes de envio, informações de rastreamento e muito mais.
Com todas essas informações em um só lugar, em uma interface fácil de usar, os clientes não precisarão se preocupar com o atendimento do produto.
Quando você deixa a mente do seu cliente à vontade, ele tem uma experiência muito mais positiva, o que pode resultar em um cliente recorrente.
Como personalizar a página Minha conta
Agora que conhecemos os benefícios e como eles podem ser aplicados à sua empresa, vamos adicionar essas alterações de design à sua página Minha conta.
Personalizar a página Minha conta manualmente
Para este método, primeiro, instalaremos todos os plugins e temas necessários; em seguida, projetaremos o painel Minha conta e, finalmente, ocultaremos a navegação padrão do WooCommerce.
Importante : Copie cada link da sua página Minha conta atual e salve-o em um documento separado.
Isso será útil em etapas futuras.
Etapa 1: instale os plug-ins necessários
Você pode usar qualquer construtor de páginas do WordPress que preferir.
Usamos Ultimate Addons for Gutenberg (UAG) para este projeto.
O UAG é um plug-in leve que adiciona layouts e blocos de design fantásticos à biblioteca Gutenberg.
É compatível com todos os temas e é totalmente gratuito para download.
Você também precisará de um outro plugin chamado Gutenberg Blocks Library & Toolkit – Editor Plus.
Este plugin permite adicionar CSS personalizado a blocos Gutenberg individuais. Vamos precisar deste plugin na etapa 3.
Ambos os plugins estão disponíveis na biblioteca de plugins do WordPress e você pode baixá-los gratuitamente.
Etapa 2: projetar seu painel
Depois de baixar os plugins desejados, é hora de personalizar a página Minha conta do WooCommerce.
1. Vá para Páginas > Minha Conta no painel do WordPress.
2. Clique em Editar para iniciar a edição da página.
Você verá o código curto padrão da minha conta adicionado lá. Este código de acesso permite que o WordPress saiba que a página é a página Minha conta.
3. Por enquanto, copie o shortcode em outro documento e exclua o bloco. Vamos precisar, mas não agora.
4. Na coluna, adicione um bloco Info Box .
5. Na barra lateral direita, use as configurações de bloco para personalizar o bloco.
Aqui, defina a posição do ícone como Left Of Text And Title e defina o alinhamento vertical como Middle .
6. Você também pode optar por habilitar ou desabilitar o título e o separador da barra lateral.
Aqui estamos desabilitando o título e o separador.
Você pode fazer isso desativando o botão de alternância ao lado da opção Ativar título .
Para desabilitar o separador, selecione Nenhum na opção Estilo em Separador .
7. Por fim, vá para a seção CTA e defina o Tipo de CTA como uma caixa completa.
8. Em seguida, vá para a visualização de lista a partir do topo e selecione e duplique a coluna até que você tenha 6 delas.
Adicione o conteúdo necessário no espaço editável e sua página deve ficar assim.
9. Agora é a hora de adicionar os links corretos a cada caixa.
Dessa forma, cada caixa de ícone fica ativa e direciona seu cliente para a respectiva página.
10. Altere os ícones em cada uma das caixas de ícones para algo relacionado ao título.
Para fazer isso, selecione uma caixa de ícone , vá para Configurações de ícone e procure o ícone mais próximo do título.
Por fim, clique no ícone na caixa de ícones.
11. Podemos adicionar algumas bordas para criar uma separação entre as caixas de ícones.
- Vá para Visualização de lista e selecione uma coluna.
- Na barra lateral direita, vá para Configurações de borda e adicione um pouco de espessura à configuração. Neste caso, adicionamos 2 px.
- Vá para Border Radius e altere o raio, se quiser. Adicionamos um raio de 5% para adicionar uma ligeira curvatura neste caso.
12. Por fim, adicione o Shortcode Minha Conta do WooCommerce .
- Clique no botão “+”.
- Selecione a opção Shortcode .
- Cole o shortcode WooCommerce My Account na barra que aparece.
Depois de adicionar o código de acesso, você notará que o antigo painel Minha conta do WooCommerce reaparecerá abaixo do seu design atual.
Podemos simplesmente ocultar isso usando o código CSS que abordaremos na próxima etapa.
Etapa 3: ocultar a navegação da página Minha conta do WooCommerce
Para esta etapa, você precisará adicionar um pequeno trecho de CSS ao seu site.
- Vá para a Visualização ao vivo.
- Selecione a coluna que você deseja ocultar. Nesse caso, a coluna shortcode.
- Na barra lateral direita, vá para a configuração de CSS personalizado .
- Cole o seguinte CSS personalizado:
.woocommerce-MyAccount-navigation { display:none; } .woocommerce-account .woocommerce-MyAccount-content { width: 100%; } 
Com essas configurações, sua página Minha conta ficará muito melhor!
Etapa 4: altere as configurações de visibilidade da sua página
Agora, a página Minha conta parece melhor que a versão padrão. Apenas um problema é que mesmo usuários desconectados verão o mesmo formato.
Veja como fica quando um usuário desconectado visita a página Minha conta do WooCommerce.
Não é assim que queremos que a página funcione. Queremos apenas que esses elementos sejam visíveis para usuários logados.
- Selecione a coluna que você deseja ocultar dos usuários desconectados na Visualização de lista. Nesse caso, selecione as colunas que contêm caixas de ícones.
- Nas Configurações Direitas, Barra Lateral, vá para Configurações do Bloco > Avançado.
- Defina as Condições de exibição para Estado do usuário.
- Ative a opção Ocultar de usuários desconectados.
- Faça isso para ambas as colunas.
Plugins do WordPress para personalizar a página da minha conta do WooCommerce
Agora, se você não quiser fazer todo o trabalho sozinho, aqui estão 3 plugins que podem ajudar.
Páginas de conta WooCommerce por Iconic WP
O plugin WooCommerce Account Page by IconicWP é um dos plugins mais perfeitos para WooCommerce e funciona bem em todos os temas populares do WordPress.
Com este plugin você pode adicionar seu conteúdo personalizado na página Minha Conta. Você também pode adicionar quantas páginas personalizadas desejar na área Minha conta.
YITH WooCommerce Personalizar minha página de conta
A página Personalizar minha conta do YITH WooCommerce vem com várias opções de personalização.
Ele garante que os clientes possam ver o que precisam na seção Minha conta do seu site. Com opções de menu ilimitadas, você tem muito espaço para instruções e notificações, pode oferecer uma experiência sólida ao cliente.
Você também pode adicionar conteúdo personalizado, como pesquisas, instruções, cupons, notificações e vídeos.
Personalizar a página da minha conta por ThemeGrill
A página Personalizar minha conta do ThemeGrill está disponível no diretório oficial do plugin WooCommerce.
Com este plug-in, você pode criar páginas 'Minha conta' impressionantes à medida que personaliza o tamanho da fonte, a cor e o plano de fundo. Além disso, existem muitas opções para adicionar informações como endereços ou métodos de pagamento.
Você pode projetar a página como achar melhor e combinar com a marca geral do seu site.
Personalize sua página da minha conta do WooCommerce hoje
É tudo o que você precisa fazer para personalizar a página Minha conta do WooCommerce!
Esse método funciona com todos os temas e em todos os construtores de páginas. Aqui está um vídeo em que personalizamos a página Minha conta do WooCommerce com o Elementor.
Se você tiver dúvidas ou comentários, sinta-se à vontade para deixá-los na seção de comentários abaixo, e entraremos em contato com você o mais rápido possível.