Como editar a página Minha conta do WooCommerce programaticamente

Publicados: 2020-12-22

Deseja personalizar a página Minha conta em sua loja? Você veio ao lugar certo. Neste guia, mostraremos como editar a página Minha conta do WooCommerce de forma programática para ajudá-lo a melhorar a experiência do cliente.

O que é a página Minha conta?

Por padrão, as lojas WooCommerce incluem uma página Minha conta onde os usuários podem ver seus pedidos e onde você armazena informações sobre informações pessoais, faturamento e endereço de entrega de seus clientes. A página padrão Minha conta é uma página do WordPress que contém um código de acesso WooCommerce.

[ woocommerce_my_account ]

Embora essa página pronta para uso tenha todas as informações básicas que seus usuários precisam para gerenciar seus pedidos e configurações, editar a página Minha conta pode ajudá-lo a se destacar de seus concorrentes e proporcionar uma melhor experiência ao usuário.

Por que personalizar a página Minha conta no WooCommerce?

Não é nenhum segredo que fornecer um ótimo UX é a chave para o sucesso de qualquer loja de comércio eletrônico. Os usuários compram on-line porque é rápido e confortável, portanto, certifique-se de que sua loja forneça as ferramentas necessárias para que tenham uma experiência incrível.

A maioria dos proprietários de lojas concentra sua atenção na personalização da página do produto e do checkout, mas esquece a página Minha conta. Como esta é uma página projetada para seus usuários registrados, personalizá-la pode ajudá-lo a melhorar a experiência deles em seu site . Além disso, pode ajudá-lo a fazê-los voltar à sua loja e aumentar suas vendas . Por exemplo, você pode criar uma seção especial onde mostra ofertas e promoções personalizadas.

Já analisamos os melhores plugins para personalizar a página Minha Conta. No entanto, se você não quiser instalar nenhuma ferramenta de terceiros e tiver algumas habilidades de codificação, temos algo para você. Neste guia, mostraremos como editar a página Minha conta do WooCommerce de forma programática .

Como editar a página Minha conta do WooCommerce programaticamente

Existem duas técnicas diferentes para editar a página Minha conta no WooCommerce:

Você pode substituir os arquivos de modelo padrão do WooCommerce
Use alguns ganchos do WooCommerce

Qual método é melhor? Cada uma dessas opções é mais apropriada para diferentes casos. Como regra geral, você deve tentar usar ganchos em vez de substituir os arquivos de modelo sempre que possível. Essa é uma das melhores práticas que o WordPress recomenda ao personalizar seu site.

No entanto, se você deseja realizar tarefas mais complexas que incluem funções ou objetos, pode ser necessário editar os arquivos de modelo. Neste guia, você aprenderá a editar a página Minha conta do WooCommerce de forma programática usando os dois métodos. Como você pode imaginar, editar arquivos de modelo tem mais riscos do que usar ganchos, portanto, lembre-se disso antes de escolher a opção desejada.

1) Personalize os arquivos de modelo de substituição da página Minha conta

NOTA : Como esse método envolve a substituição de arquivos de modelo, recomendamos que você crie um backup completo do seu site antes de começar. Se você não sabe como fazer isso, confira este guia. Para obter informações mais detalhadas sobre como personalizar os modelos do WooCommerce, confira este post.

O processo para substituir os arquivos de modelo do WooCommerce é semelhante a substituir qualquer outro arquivo em seu tema filho. Como você sabe, os temas filhos permitem que você edite seu tema sem perder as personalizações ao atualizar o tema. O mesmo se aplica aos plug-ins do WooCommerce, portanto, se você não tiver um tema filho, poderá criar um ou usar qualquer um desses plug-ins.

Primeiro, no painel de administração do WordPress , vá para Plugins > Editor . Em seguida, vá para a pasta de plugins, abra o WooCommerce e encontre os arquivos de modelo. Para isso, você pode usar o editor de arquivos de plugins do WordPress ou qualquer editor de código de sua escolha. No diretório WooCommerce , abra o arquivo de modelos e procure a pasta myaccount .

plugins/woocommerce/templates/myaccount

Como editar a página Minha Conta do WooCommerce programaticamente - Arquivos de modelo

Abra a pasta /myaccount e você encontrará todos os arquivos de modelo que a página Minha conta usa. woocommerce meus arquivos de modelo de conta

Esses são os arquivos padrão que estão trabalhando no seu site. Para substituir esses arquivos, você precisa criar um novo arquivo com o mesmo nome em seu tema filho. No entanto, se você criar um arquivo vazio, desativa todas as funcionalidades do arquivo original. Portanto, para evitar a criação de problemas em seu site, você precisa copiar o arquivo padrão e colá-lo na pasta do tema.

Por exemplo, digamos que você queira copiar o arquivo dashboard.php da instalação do WooCommerce. Antes de colá-lo em seu tema filho, você precisa criar dois subdiretórios aninhados e chamá-los de /woocommerce e /myaccount . Depois disso, cole o arquivo dashboard.php nele: child_theme/woocommerce/myaccount/dashboard.php Edite a página WooCommerce My Account programaticamente - Substituindo o arquivo de modelo

Agora abra o arquivo dashboard.php e faça algumas pequenas alterações para ter certeza de que está funcionando corretamente. É isso! Você acabou de aprender como substituir um arquivo de modelo do WooCommerce. Esse é o primeiro passo. Agora, vamos dar um passo adiante e ver como personalizar a página Minha conta.

Personalizar o painel da página Minha conta

Agora que você sabe como substituir arquivos de modelo, vamos ver como editar a página WooCommerce My Account programaticamente. Nesta seção, mostraremos como personalizar o painel principal da página Minha conta. Ao final desse processo, sua página Minha conta ficará assim:

personalizar o modelo de painel do woocommerce da minha conta Adicionamos uma imagem de título e algum texto abaixo dela. Além disso, criamos uma lista com links para as seções que os usuários visitam com mais frequência, um rodapé e alguns links de imagem para que os clientes possam entrar em contato com você facilmente.

Roteiro completo

Este é o arquivo dashboard.php final que cria a captura de tela acima.

 if ( !defined( 'ABSPATH' ) ) {
saída; // Sai se acessado diretamente.
}
$allowed_html = array(
'a' => array('href' => array(),)
);
?>
<h2>
<?php
printf(
/* tradutores: 1: nome de exibição do usuário 2: URL de logout */
wp_kses( __( 'Ei %1$s, você está de volta! ', 'woocommerce' ), $allowed_html ),
'<forte>' . esc_html( $current_user->display_name ) . '</strong>',
esc_url( wc_logout_url() )
);
?>
</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU"/>
<h3>
<?php
/* tradutores: 1: URL de pedidos 2: URL de endereço 3: URL da conta. */
$dashboard_desc = __( 'Este é o painel principal da sua conta: ', 'woocommerce' );
if ( wc_shipping_enabled() ) {
/* tradutores: 1: URL de pedidos 2: URL de endereços 3: URL da conta. */
$dashboard_desc = __( 'Este é o painel principal da sua conta:', 'woocommerce' );
}
printf(
wp_kses($dashboard_desc,$allowed_html),
esc_url( wc_get_endpoint_url( 'pedidos' ) ),
esc_url( wc_get_endpoint_url( 'edit-address' ) ),
esc_url(wc_get_endpoint_url('edit-account'))
);
$ul_list = __('<ul>
<li>Visualize seus <a href="%1$s">pedidos recentes</a></li>
<li>Gerencie seus <a href="%2$s">endereços de envio e cobrança</a></li>
<li><a href="%3$s">Edite sua senha e detalhes da conta</a></li>
</ul>');
$div_contato = __('
<div class="acc_contact">
<span class="acc_images" >
<a href="#link to send whatsapp message"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png"/></a>
<a href="#link to facebook profile"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png"/></a>
<a href="#link to twitter profile"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png"/></a>
<a href="#link para enviar e-mail"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png"/></a>
</span>
</div>');
$div_footer=__('
<div>
<h4><i>Construído com amor!</i></h4>
<img src="http://localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png"/>
</div>');
?>
</h3>
<p>Gerencie o perfil e as informações pessoais aqui. Preencha todos os campos para que possamos saber sobre você. Todas as edições feitas em sua conta serão refletidas no site imediatamente, para que outros usuários possam saber sobre você e suas necessidades atuais sem demora</p>
<?php
echo $ul_list.$div_footer.$div_contact;

Se você der uma olhada no código, verá que todo o código original que copiamos do modelo padrão ainda está lá. Acabamos de modificar algumas strings e reordenamos os links como uma lista. Além disso, usamos scripts adicionais para adicionar mais conteúdo à guia. Para entender melhor as alterações que fizemos, você pode verificar o dashboard.php padrão.

Adicionando imagens

Para exibir imagens na página Minha conta, você precisa substituir os URLs das imagens. O mesmo se aplica aos links de imagens de ícones sociais.

Personalizações de CSS

Outra maneira de personalizar a página Minha conta – e qualquer outra página – é usar scripts CSS. Este é o script CSS que usamos para estilizar nosso arquivo dashboard.php personalizado:

 .woocommerce-MyAccount-content > h2:nth-child(2),
.woocommerce-MyAccount-content > h3:nth-child(4){
text-align:center;
}
.acc_contact{
padding-top:20px;
text-align:center;
}
.acc_contact > h3{
flutuar: esquerda;
}
.acc_images{
margem:auto;
largura: 50%;
exibição: bloco;
}
#bem vinda{
margem:auto;
}
.acc_images img {
margem esquerda:4px;
margem direita:4px;
exibição: bloco em linha;
largura: 55px;
}
#acc_footer{
margem-topo:15px;
cor de fundo: #202020;
alinhamento de texto: centro;
raio da borda: 15px;
}
#acc_footer > h4{
padding-top:20px;
cor:rgb(235, 228, 228);
intensidade da fonte: Negrito;
}
#acc_footer > img{
margem:auto;
padding-bottom:20px;
}

Você pode usar esse código como base, colá-lo no arquivo style.css do seu tema filho e personalizá-lo de acordo com a aparência do seu site.

2. Edite a página da minha conta do WooCommerce com ganchos

O segundo método para editar a página Minha conta programaticamente é usando alguns ganchos do WooCommerce. Para isso, você precisará ter um entendimento básico de como os ganchos funcionam no WooCommerce. Se você não estiver familiarizado com ganchos, recomendamos que você confira este guia.

A) Renomear guias

Este script renomeará a guia Endereço para Seus endereços .

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999 );
function QuadLayers_rename_acc_adress_tab($items) {
$items['edit-address'] = 'Seus endereços';
retornar $itens;
}

B) Remover guias

Para remover completamente qualquer guia, use a função unset() assim:

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_address', 9999 );
function QuadLayers_remove_acc_address($items) {
unset( $items['downloads']);
retornar $itens;
}

No script acima, removemos a guia Downloads . Você pode encontrar a lista completa de slug de guias no array $items , para que possa escolher o que deseja.

 $itens = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'pedidos' => __( 'Pedidos', 'woocommerce' ),
'downloads' => __( 'Downloads', 'woocommerce' ),
'edit-address' => _n( 'Endereços', 'Endereço', (int) wc_shipping_enabled(), 'woocommerce' ),
'métodos de pagamento' => __( 'Métodos de pagamento', 'woocommerce' ),
'edit-account' => __( 'Detalhes da conta', 'woocommerce' ),
'customer-logout' => __( 'Logout', 'woocommerce' ),
);

C) Mesclar guias e conteúdo

Outra opção para personalizar a página Minha conta é mesclar guias . Por exemplo, vamos ver como remover a guia Endereços e mover seu conteúdo para a guia Conta .

 // -----------------------------
// 1. Remova a guia Endereços
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
function QuadLayers_remove_acc_tab($items) {
unset($items['edit-address']);
retornar $itens;
}
// -------------------------------
// 2. Insira o conteúdo da guia Addresses em uma guia existente (edit-account neste caso)
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );

Agora, a guia Conta ficará assim: mesclar o conteúdo da guia woocommerce da minha conta

D) Adicionar uma nova guia com conteúdo personalizado

Agora, vamos ver como adicionar conteúdo à página Minha conta . Neste exemplo, adicionaremos uma nova guia chamada Suporte, onde os usuários podem facilmente dar uma olhada em seus tíquetes de suporte. Usaremos dois códigos de acesso fornecidos por um plug-in de terceiros para exibir algum conteúdo interessante, mas você poderá usar qualquer código de acesso desejado em sua nova guia.

No entanto, esteja ciente de que alguns códigos de acesso podem não funcionar devido a incompatibilidades com o WooCommerce. Para adicionar uma guia Suporte com conteúdo personalizado à página Minha conta do WooCommerce, cole o código a seguir no arquivo functions.php do seu tema filho.

 // 1. Registrar novo endpoint
// Nota: Resave Permalinks ou dará erro 404  
function QuadLayers_add_support_endpoint() {
    add_rewrite_endpoint( 'support', EP_ROOT | EP_PAGES );
}  
add_action( 'init', 'QuadLayers_add_support_endpoint' );  
// ------------------
// 2. Adicionar nova consulta
function QuadLayers_support_query_vars( $vars ) {
    $vars[] = 'suporte';
    retorna $vars;
}  
add_filter( 'query_vars', 'QuadLayers_support_query_vars', 0 );  
// ------------------
// 3. Insira o novo endpoint 
function QuadLayers_add_support_link_my_account($items) {
    $items['support'] = 'Suporte ';
    retornar $itens;
}  
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_add_support_link_my_account' );
// ------------------
// 4. Adicione conteúdo ao novo endpoint  
function QuadLayers_support_content() {
echo '<h3>Suporte</h3><p>Bem-vindo à área de suporte. Como cliente premium, gerencie seus tíquetes de suporte aqui, você pode enviar um tíquete se tiver algum problema com seu site. Faremos o nosso melhor para lhe fornecer uma solução rápida e eficiente</p>';
echo do_shortcode('[tickets-shortcode]');
echo do_shortcode('[wpforms]');
}  
add_action( 'woocommerce_account_support_endpoint', 'QuadLayers_support_content' );

Se você receber um erro de 404 páginas não encontradas ao clicar na nova guia, abra a página de permalink acessando o painel do WordPress > Configurações > Permalinks e clique no botão Salvar na parte inferior.

Observe que o script é dividido em quatro seções. Cada um deles realiza uma tarefa diferente, então você usa as seções que deseja adicionar à sua loja. Lembre-se também que na última seção do script (4), você pode substituir o shortcode na função do_shortcode() . Este será o resultado final da nova guia Suporte. aba personalizada minha conta woocommerce

Conclusão

Em suma, a página padrão Minha conta tem as informações básicas que os usuários precisam, mas é bem básica. Portanto, se você deseja melhorar a experiência do usuário em sua loja, deve personalizar a página Minha Conta. Isso não apenas ajudará você a aprimorar uma seção muito importante de sua loja, mas também aumentará suas vendas.

Existem vários plugins para personalizar a página Minha Conta. No entanto, se você não quiser instalar mais plugins e tiver habilidades de codificação, poderá editar a página WooCommerce My Account programaticamente. Para isso existem duas opções:

Substituir arquivos de modelo
Use ganchos WooCommerce

Ambos os métodos farão o trabalho, mas como regra geral, recomendamos que você use ganchos quando possível. É menos arriscado e é uma das melhores práticas que o WordPress recomenda. Neste guia, vimos vários exemplos de coisas que você pode fazer usando os dois métodos. Recomendamos que você use esses scripts como um guia, use-os para obter algumas ideias e brinque para aproveitar ao máximo a página Minha conta em sua loja.

Por fim, para obter mais guias para aproveitar ao máximo a página Minha conta, dê uma olhada nestes guias:

Como personalizar o WooCommerce My Account com e sem plugins
Melhores plugins para personalizar a página Minha conta do WooCommerce

Quais alterações você fez na página Minha conta? Você teve algum problema ao seguir nosso tutorial? Deixe-nos saber na seção de comentários abaixo!