Como personalizar a página "Minha conta" do WooCommerce


Após o carrinho e a última página de compra, se houver uma página importante em um e-commerce, é a página da conta do cliente.

Nesta página você pode revise os pedidos, modifique seus dados, adicione métodos de pagamento e tudo o que você deseja adicionar.

Adicionar? Sim eu disse adicione, personalize, o que quer que você quer, porque vamos aprender a personalizar a página "Minha conta"Do WooCommerce.

A página "Minha conta"

Por padrão, o WooCommerce cria a página "Minha conta"Automaticamente durante o assistente de instalação, mas se por algum motivo não foi criado, você pode fazê-lo sozinho.

Você só tem que adicionar o seguinte shortcode para a página que você deseja:

[woocommerce_my_account]

Mais tarde indicar o que está nas configurações do WooCommerce, em WooCommerce> Ajustes> Avançado.

E, por padrão, terá mais ou menos esse aspecto, com os principais elementos do gerenciamento de contas de usuários.

Daqui é quando nós colocamos mãos para trabalhar e vamos começar a personalizar a página "Minha conta"Por WooCommerce.

Como personalizar a ordem do menu

Uma primeira personalização que podemos pensar é alterar a ordem dos itens de menu na conta.

Para isso, vamos adicionar o seguinte código ao arquivo funções.php ou para o seu plugin de personalização:

/ **
  * Modificações da minha conta
  * /

 function my_account_menu_order () 
 $ menuOrder = array (
 'dashboard' => __ ('Dashboard', 'woocommerce'),
 'orders' => __ ('Orders', 'woocommerce'),
 'downloads' => __ ('Download', 'woocommerce'),
 'edit-address' => __ ('Endereços', 'woocommerce'),
 'edit-account' => __ ('Detalhes da conta', 'woocommerce'),
 'customer-logout' => __ ('Logout', 'woocommerce'),
 );
 return $ menuOrder;
 
 add_filter ('woocommerce_account_menu_items', 'minha_conta_menu_ordem');

Este código tem a ordem padrão dos menus, então você só tem que mudar a ordem nele no array $ menuOrder, por exemplo, assim:

/ **
* Modificações da minha conta
* /
function my_account_menu_order () 
 $ menuOrder = array (
 'orders' => __ ('Orders', 'woocommerce'),
 'downloads' => __ ('Download', 'woocommerce'),
 'edit-address' => __ ('Endereços', 'woocommerce'),
 'edit-account' => __ ('Detalhes da conta', 'woocommerce'),
 'customer-logout' => __ ('Logout', 'woocommerce'),
'dashboard' => __ ('Dashboard', 'woocommerce'),
 );
 return $ menuOrder;
 
 add_filter ('woocommerce_account_menu_items', 'minha_conta_menu_ordem');

E você terá uma mudança assim:


Como personalizar nomes e ícones de menu

Se formos criativos, podemos mudar nomes e ícones no menu. É muito fácil.

Alterar nomes É tão simples quanto começar com o código da personalização anterior e colocar outros nomes, por exemplo:

/ **
* Modificações da minha conta
* /
function my_account_menu_order () 
 $ menuOrder = array (
 'orders' => __ ('Your orders', 'woocommerce'),
 'downloads' => __ ('Seus downloads', 'woocommerce'),
 'edit-address' => __ ('Endereços', 'woocommerce'),
 'edit-account' => __ ('Meus dados', 'woocommerce'),
 'customer-logout' => __ ('Sair', 'woocommerce'),
'dashboard' => __ ('Start', 'woocommerce'),
 );
 return $ menuOrder;
 
 add_filter ('woocommerce_account_menu_items', 'minha_conta_menu_ordem');

E nós vamos ter isso:

Para mudar os ícones, temos que mergulhe no nosso amado CSS.

A primeira coisa é detectar o ícone atual quem está usando o tema Basta clicar com o botão direito do mouse no item para exibir em sua página e clicar no item de menu pop-up do navegador. "Inspecionar"(No caso do navegador Cromo).

Na janela do console, você verá que, nos estilos, no caso do tema StoreFront, use esta classe:

.woocommerce-MyAccount-navegação ul li.woocommerce-MyAccount-navigation-link - encomendas a: antes 
conteúdo: ' f291';

Assim que você sabe o que modificar. Você só precisa abrir o Personalizador do WordPress e na seção de CSS adicional adicione o seguinte:

.woocommerce-MyAccount-navegação ul li.woocommerce-MyAccount-navigation-link - encomendas a: antes 
conteúdo: ' f07a';

Visto visualmente seria assim:

E nós teremos mudou o ícone do cesto para outro de um carrinho.

Como o tema StoreFront usa ícones de Fonte Incrível Você vai ver que eu só mudei o código padrão (f291) por um diferente (f07a). Para conhecer o código de outros ícones, você pode consultá-los aqui.

Como ocultar um item de menu

Se você quiser ocultar algum item de menu, basta adicionar um código como este às suas funções personalizadas:

add_filter ('woocommerce_account_menu_items', 'ayudawp_ocultar_direccion', 999);
 
function ayudawp_ocultar_direccion ($ items) 
unset (itens $['edit-address']);
devolver $ itens;

Nesse caso, estamos removendo a guia de endereço, mas podemos fazer isso com qualquer outra variável.

Como adicionar uma nova aba ao menu

Estamos começando a mexer? Porque até agora nós fizemos apenas pequenas mudanças, sim, eles fornecem, mas onde nós realmente vamos aproveite todo o potencial de usar funções está adicionando novos elementos.

Para adicionar um novo elemento ao menu, primeiro temos que criar uma nova variável, um 'endpoint'

Esta variável WooCommerce irá atuar como o lesma do URL abaixo /minha conta/.

Neste exemplo, vou adicionar uma nova seção chamada "Presentes" Para isso, a primeira coisa é criar a nova variável, como sempre em nossa funções.php ou plugin de customizações:

/ **
  * Novas variáveis ​​para a página da minha conta.
  * /

 add_action ('init', 'my_account_new_endpoints');

 function my_account_new_endpoints () 
 add_rewrite_endpoint ('presentes', EP_ROOT 

Salve as alterações e vá para Área de trabalho do WordPress> Configurações> Links permanentes. Lá, sem modificar nenhum ajuste, salve as alterações para que a nova variável seja registrada, caso contrário não funcionará.

Feito isso, podemos adicionar o seguinte código para obter o peça-modelo necessário para o conteúdo da nova seção:

/ **
  * Recuperando o conteúdo da nova variável
  * /

  // Prêmios
 add_action ('woocommerce_account_regalos_endpoint', 'gifts_endpoint_content');
 função regalos_endpoint_content () 
     get_template_part ('my-account-gifts');
 

Agora crie um novo arquivo PHP na pasta raiz do tópico ativo, chamado 'minha conta-presentesE adicione o que quer, por exemplo:

<? php

Tenho saudades de 'seus presentes';

E agora você pode adicionar o novo item de menu "PresentesE coloque um ícone legal com CSS:

/ **
* Modificações da minha conta
* /
function my_account_menu_order () 
 $ menuOrder = array (
                'presentes' => __ ('seus presentes', 'woocommerce'),
 'orders' => __ ('Your orders', 'woocommerce'),
 'downloads' => __ ('Seus downloads', 'woocommerce'),
 'edit-address' => __ ('Endereços', 'woocommerce'),
 'edit-account' => __ ('Meus dados', 'woocommerce'),
 'customer-logout' => __ ('Sair', 'woocommerce'),
'dashboard' => __ ('Start', 'woocommerce'),
 );
 return $ menuOrder;
 
 add_filter ('woocommerce_account_menu_items', 'minha_conta_menu_ordem');

.woocommerce-MyAccount-navegação ul li.woocommerce-MyAccount-navegação-link - presentes para: antes 
conteúdo: ' f005';

E olha que fofo de novo elemento:

Chulo, né?

Como unificar o conteúdo de várias guias

Esse truque que eu pessoalmente adoro fazer pelos meus clientes.

E é que quando você adiciona plugins para o WooCommerce, eles geralmente adicionam itens (abas) ao menu, o menu é muito longo, e é então uma solução muito elegante para unificar o conteúdo de várias guias em um único.

Um muito lógico e prático é mover a mudança de endereço para o "Detalhes da conta", Mas você pode aplicar esse truque a qualquer elemento, existente ou novo, dependendo de suas necessidades e criatividade.

O exemplo que mencionei seria isto:

/ * Unificando o conteúdo das guias * /
// Primeiro, ocultamos a guia para mover (edit-address neste exemplo)
 
add_filter ('woocommerce_account_menu_items', 'ayudawp_mover_direcciones', 999);
  
função ayudawp_mover_direcciones ($ items) 
unset (itens $['edit-address']);
devolver $ itens;

 
// Então mostramos o conteúdo dos endereços em outra aba (edit-account neste exemplo)
 
add_action ('woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address');

No truque, primeiro usamos o código que aprendemos antes para ocultar as guias e, em seguida, criamos a ação que adiciona o conteúdo dos endereços à variável "Detalhes da conta".

O resultado seria assim …

O que é muito bom?

Como personalizar o conteúdo das guias

Às vezes nós queremos entrar alterar o conteúdo padrão de qualquer uma das guias no menu da página "Minha conta"

Se este for o caso, temos que siga as diretrizes de criação de modelos do WooCommerce, mais do que qualquer coisa para não modificar os arquivos existentes, de modo a não perder as alterações nas atualizações.

O procedimento, no entanto, é simples.

  1. Crie uma pasta chamada 'woocommerce'No diretório raiz do tema ativo.
  2. Copie nessa pasta o arquivo que você deseja personalizar.
  3. Edite o arquivo e mude para o seu gosto.

Isso é útil para essas personalizações e para modificar modelos de email, portanto, com este procedimento simples abre um mundo de possibilidades de personalização do WooCommerce.

Com relação ao que estamos vendo hoje, vamos procurar, por exemplo, o conteúdo da guiaEscrivaninha', Que em breve navegamos através da estrutura de pastas atual do plugin, veremos que está em'/myaccount/dashboard.php'

Por isso, copiaremos a mesma rota em nossa pasta "woocommerce" que criamos, assim:

/name-of-my-tema/woocommerce/myaccount/dashboard.php

Depois de ter isso, você pode abrir o arquivo 'dashboard.php'Do seu modelo para modificar / adicionar / remover o que for.



<? php / * tradutores: 1: nome de exibição do usuário 2: logout url * / printf ( __ ('Olá% 1 $ s (não% 1 $ s? Sair), 'woocommerce'), '' esc_html ($ current_user-> display_name). '', esc_url (wc_logout_url (wc_get_page_permalink ('myaccount'))) ); ?>

<? php printf ( __ ('No painel da sua conta, você pode ver seu encomendas recentes, gerencie seu endereços de envio e cobrançae edite sua senha e detalhes da conta'woocommerce'), esc_url (wc_get_endpoint_url ('orders')), esc_url (wc_get_endpoint_url ('edit-address')), esc_url (wc_get_endpoint_url ('edit-account')) ); ?>

<? php / ** * Painel da minha conta. * * @sem 2.6.0 * / do_action ('woocommerce_account_dashboard'); / ** * Reprovada a ação woocommerce_before_my_account. * * @despreciado 2.6.0 * / do_action ('woocommerce_before_my_account'); / ** * Reprovada a ação woocommerce_after_my_account. * * @despreciado 2.6.0 * / do_action ('woocommerce_after_my_account'); / * Omita o fechamento da tag PHP no final dos arquivos PHP para evitar problemas de "cabeçalhos já enviados". * /

Somente me dê um pequeno caso e comece a personalizar a partir da linha que indico no código. A partir daí o limite é sua imaginação e seu conhecimento de programação.

Você pode repetir esse processo com qualquer outro modelo que desejar personalizar do plug-in, respeitando as rotas e o procedimento descrito acima.

Basta verificar cada atualização do WooCommerce se algo mudou nesse processo ou no caminho dos arquivos, o que às vezes acontece.

Como personalizar o conteúdo fora das guias

É aqui que somos criativos e também isto é para todos os públicos.

Você se lembra que no começo deste artigo eu lhe disse que a página "Minha conta"É uma página normal com um shortcode?

Bem, é aí que está a graça, porque Tudo ou o que vimos até agora é o que será mostrado, por assim dizer, dentro do shortcode, mas e quanto ao exterior?

Bem, ai você pode colocar o que quiser, você só precisa editar a páginae, exceto para remover o shortcode Você pode modificá-lo como quiser.

Não importa se você adicionar imagens, texto, antes ou depois do shortcode, ou até mesmo os modelos com o seu construtor favorito, contanto que você mantenha o shortcode intacta em algum lugar permanecerá a página de "Minha conta" mas com tudo o que você deseja adicionar.

Também você pode adicionar mais códigos de acesso, e há muitos, por exemplo, para mostrar os itens da loja em oferta, ou o que você pode pensar, o limite aqui é você, e que não há uma página churro de "Minha conta" claro.

Resumindo

Como você viu a página "Minha conta"De uma loja online feita com WooCommerce é totalmente personalizável.

Você pode modificar todos e cada um dos elementos existentes, adicionar novos, removê-los e até mesmo layout da página.

A única coisa que você deve lembrar em todos os momentos é que O objetivo desta página é o seu cliente, é o seu espaço pessoal, e que você deve usá-lo para torná-lo útil e, se for o caso, encorajá-lo a comprar outra coisa, mas sem passar por isso, pois você já tem o resto da loja online, e você estratégia de funil de vendas.

A entrada Como personalizar a página "Minha Conta" do WooCommerce foi publicada pela primeira vez por Fernando Tellado na Ajuda do WordPress. Não copie conteúdo, não diga nada de bom sobre você para seus leitores.

Posts interessantes:

Como gerar leads e fazer vendas com o alcance de Ninja

20 idéias bem sucedidas de negócios em casa na Índia

Nuvem Downloader – código-bude.net

Como Steve Jobs teve sucesso falhando primeiro

9 Dicas para Evitar Um Facebook Conta de Proibição

3 maneiras baratas (ou gratuitas) de se pesquisar para infecções sexualmente transmissíveis

https://testmygeekstuff.com/7-dicas-para-o-dominio-certo-e-o-que-voce-deve-considerar-ao-comprar-um-dominio/

 Estratégias de Marketing de Internet Rentáveis

Como aprender fotografia a partir de 0