Como personalizar a página da minha conta no WooCommerce (plugins e programaticamente)

Procurando maneiras fáceis de editar e personalizar sua página Minha conta? Neste guia, você aprenderá como personalizar a página Minha conta do WooCommerce tanto de forma programática quanto com plugins para levar sua loja ao próximo nível.

Configurar uma página Minha conta pode ser crucial para qualquer loja online. Essa página geralmente é ignorada pela maioria dos lojistas, mas pode ajudá-lo a se destacar de seus concorrentes e fornecer aos seus compradores uma experiência muito melhor. Antes de pular para como editá-lo, vamos ver mais de perto por que é tão importante personalizar sua página WooCommerce My Account.

Qual é a minha página de conta e por que você deve personalizá-la?

A página Minha conta no WooCommerce é onde os proprietários das lojas mantêm informações sobre as informações pessoais, faturamento e endereço de entrega dos clientes. Além disso, é onde os usuários podem verificar seus pedidos. A página padrão Minha conta é uma página simples do WordPress que contém um código de acesso WooCommerce.

 [ woocommerce_my_account ]

Essa página padrão tem todas as informações básicas que os usuários precisam, mas você pode aproveitá-la ao máximo, a menos que personalize a página Minha conta. Você pode usar esta página para uma ampla gama de propósitos. Além de fornecer aos seus clientes informações sobre seus pedidos, você pode configurar cupons e códigos de desconto e exibi-los lá, ou ainda fornecer alertas exclusivos, ofertas de desconto e alertas de vendas.

A página Minha conta abre inúmeras oportunidades para interação adicional com seus clientes, ao mesmo tempo em que torna suas experiências de compra muito melhores. Por exemplo, você pode permitir que os compradores salvem detalhes de pagamento, endereços de entrega e detalhes adicionais da conta e integrá-los ao processo de checkout.

Da mesma forma, você pode fornecer a eles uma lista de downloads e produtos virtuais que eles trouxeram diretamente na página Minha conta e até permitir que eles abram tíquetes de suporte premium e entrem em contato diretamente na página Minha conta.

Se você estiver executando uma página do WooCommerce e quiser torná-la o mais conveniente possível para seus clientes, você definitivamente deve personalizar sua página Minha conta no WooCommerce.

Como personalizar a página Minha conta no WooCommerce

Há duas maneiras de editar a página Minha conta:

1. Com plug-ins
2. Programaticamente

Neste guia, descreveremos os dois métodos para que você possa escolher o que melhor se adapta a você.

1) Editar página Minha conta com plugins

Existem vários plugins para editar a página Minha conta. Para facilitar sua vida, vamos dar uma olhada em nossa seleção das melhores ferramentas. Esses plugins vêm com toda a personalização que você precisa para tornar sua página WooCommerce My Account única, confortável e fácil de usar. Se você não tem habilidades de codificação, usar plugins é o caminho a percorrer.

Você pode editar as guias da página Minha conta, criar novas e até personalizar sua aparência usando personalizadores dedicados e várias opções de personalização. Sem mais delongas, esta é nossa recomendação pessoal de plugins que você pode usar para personalizar sua página Minha conta no WooCommerce.

1) Personalizador de Loja

StoreCustomizer é um plugin WordPress gratuito que pode ajudá-lo a personalizar todas as suas páginas do WooCommerce. Isso inclui tudo, desde adicionar itens aos seus menus, bem como gerenciar sua loja, produtos, páginas de checkout e até mesmo sua Minha conta. Você pode renomeá-lo livremente, remover guias e opções diferentes para alterar o estilo da página Minha conta de 2 maneiras diferentes.

Uma grande coisa sobre o StoreCustomizer é que ele não requer nenhuma alteração em seus modelos de tema ou até mesmo a configuração de ganchos do WooCommerce. O plugin é extremamente leve e fácil de usar. Além disso, com a versão premium, você tem acesso a mais opções para personalizar sua página Minha conta, como adicionar guias personalizadas e editar o conteúdo da guia usando os editores Gutenberg como um plug-in do construtor de páginas.

Características principais

• Um plugin fácil de usar que personaliza as páginas do WooCommerce sem alterar seus arquivos de tema.
• Totalmente integrado com o WordPress Live Customizer.
• Permite renomear e excluir as guias de Minha conta, bem como alterar o estilo das guias.
• A versão premium permite a personalização completa da guia Minha conta, bem como a adição de guias personalizadas.

Preço

Este é um plugin freemium. Possui uma versão gratuita com recursos básicos e quatro planos premium que começam em 29 USD por ano.

2) Impulsionador

Booster é a resposta completa para personalizar as páginas do WooCommerce sem a necessidade de codificação. Este plugin vem com uma ampla variedade de módulos para ajudá-lo a editar vários recursos e páginas do WooCommerce. Isso também inclui a página Minha conta. Você pode alterar facilmente os pontos de extremidade da guia para que clicar nas guias o leve a qualquer página que você especificar.

Além disso, você pode adicionar páginas personalizadas e até mesmo personalizar páginas e guias específicas. Por exemplo, você pode personalizar as mensagens do painel e até permitir que seus clientes alterem o status do pedido manualmente na guia de pedidos. Se você está procurando uma solução completa para personalizar sua página Minha conta, o Booster é definitivamente uma ótima resposta.

Características principais

• Tudo em um plugin para personalizar páginas, funções e modelos do WooCommerce.
• Personalização do ponto de extremidade da guia para as páginas Minha conta.
• Fornece opções para personalização da guia do painel.
• Adicione guias personalizadas, bem como renomeie, estilize e reordene as guias Minha conta.

Preço

O Booster possui uma versão gratuita com recursos limitados e quatro planos premium que começam em 99,99 USD por ano.

3) Personalize minha conta para WooCommerce

Personalizar minha conta para WooCommerce é uma opção premium para personalizar e personalizar sua página Minha conta da maneira que você quiser. Com esta ferramenta, você pode editar e adicionar quantos endpoints quiser. Você pode renomear, reordenar e personalizar todas as suas guias usando o personalizador ao vivo. Além disso, você pode alterar livremente os rótulos das guias, adicionar ícones e até incluir conteúdo personalizado em suas guias sem a necessidade de codificação.

Além disso, este plug-in inclui opções de edição poderosas junto com o personalizador ao vivo para personalizar sua página Minha conta. Você pode alterar o tamanho e as cores da fonte, as imagens de fundo, as cores, o preenchimento e a margem. Você também pode adicionar seu próprio código CSS personalizado para levar a personalização a um nível totalmente novo.

Características principais

• Fácil de usar e totalmente integrado com o personalizador Live.
• Personalização completa de todas as guias e endpoints na página Minha conta.
• Opções para alterar rótulos de guias, adicionar conteúdo personalizado, imagens e ícones de guias.
• Suporta código CSS personalizado para personalização adicional.

Preço

Customize My Account for WooCommerce é um plugin premium que custa 49 USD por ano.

Personalizando a página Minha conta usando WooCommerce StoreCustomizer

Agora, vamos dar uma olhada em como usar o StoreCustomizer para personalizar sua página WooCommerce My Account. A versão gratuita permite que você edite os nomes das guias ou altere o estilo das guias, enquanto para adicionar novas guias, você precisará do plano pro. Mesmo que você escolha um plug-in diferente, esta seção ajudará você a ter uma ideia melhor de como usar o plug-in para personalizar sua página Minha conta.

Primeiro, vamos instalar o plugin StoreCustomizer . Abra o painel de administração do WordPress e vá para Plugins > Adicionar novo. Em seguida, use a barra de pesquisa no canto superior direito para pesquisar StoreCustomize r. Clique em Instalar e depois em Ativar . Agora, o plugin deve ser ativado e instalado.

Para começar a personalizar sua página Minha conta, acesse WooCommerce > StoreCustomizer .

Isso abrirá a interface do plug-in e fornecerá todas as opções de personalização que o plug-in oferece. Como vamos personalizar a página Minha conta, clique no botão Personalizar suas configurações na parte inferior da página.

Usando StoreCustomizer

Isso deve abrir uma janela do Live Customizer e você poderá ver uma guia do Store Customizer no menu. Clique nele e vá para a guia Página da conta abaixo dele.

Agora, vamos começar a editar a página Minha conta. Primeiro, vamos alterar as opções de estilo da guia. Clique na opção Account Tab Design e altere-a para Horizontal Styling ou Side Tab Styling.

Também podemos optar por remover as guias ou renomeá -las, então vamos renomear a guia Endereços para Endereço de entrega e excluir a guia Downloads.

Renomeando as guias da página Minha conta usando o Personalizador de loja

Para renomear, vá para a guia que deseja renomear e clique em Editar texto da guia . Em seguida, basta inserir o novo texto da guia que você deseja no campo Título da guia e ele deve aparecer na janela de personalização ao vivo à direita. Você também pode optar por alterar o título da página que aparece quando você clica na guia. Basta alterar o texto sob o título da página, e isso deve fazer isso.

Removendo as guias da página Minha conta usando o Personalizador de loja

Para remover uma guia, basta clicar no botão Remover guia na guia que deseja ocultar. Por exemplo, se você deseja remover a guia Downloads, basta selecionar a opção Remover guia abaixo dela.

Lembre-se de que você pode redefinir qualquer alteração de guia a qualquer momento. Ao clicar no ícone de redefinição nas guias, você pode definir as guias Minha conta de volta ao padrão.

Agora, recomendamos que você vá em frente e personalize as guias da página Minha conta do WooCommerce o quanto quiser e edite suas guias. No entanto, se você quiser adicionar novas guias e endpoints, precisará adquirir a versão premium do StoreCustomizer . O processo para adicionar novas guias é idêntico e você pode simplesmente abrir a tela de personalização para fazer isso.

Você também pode consultar a documentação do plug-in para aproveitar ao máximo o plug-in e toda a sua gama de personalizações do WooCommerce. Quando terminar de personalizar sua página Minha conta, lembre-se de clicar em Publicar na parte superior da tela do personalizador para salvar suas alterações.

Embora a opção de personalizar sua página Minha conta usando um plug-in seja mais fácil e simplificada, a maioria dos plug-ins custa uma quantia significativa de dinheiro para fornecer uma ampla variedade de recursos. Portanto, se você deseja aproveitar ao máximo sua página Minha conta, mas está com orçamento limitado, codificar sua própria solução é uma ótima alternativa.

Vamos ver como você pode personalizar sua página WooCommerce My Account programaticamente .

2) Personalize a página da minha conta no WooCommerce programaticamente

Se você tiver habilidades de codificação, também poderá personalizar a página Minha conta programaticamente editando os arquivos de modelo do WooCommerce ou usando ganchos do WooCommerce . Antes de começar, é altamente recomendável que você crie um tema filho ou use qualquer um desses plugins e gere um backup completo para sua instalação do WordPress.

Para nossa demonstração, mostraremos como personalizar sua página Minha conta programaticamente usando ganchos do WooCommerce. Isso não requer a edição de seus arquivos de modelo, portanto, há menos chances de quebrar algo.

No entanto, se você quiser mais opções para personalizar sua página Minha conta com um pouco de codificação, confira nosso guia completo sobre como editar a página Minha conta programaticamente. Para obter mais informações sobre como personalizar modelos, dê uma olhada neste tutorial.

Personalizando a página da minha conta no WooCommerce usando ganchos WooCommerce

Se você não estiver familiarizado com os ganchos do WooCommerce, recomendamos que você dê uma olhada em nosso guia sobre ganchos do WooCommerce para entender melhor como eles funcionam. Depois disso, basta seguir as etapas a seguir para personalizar e realizar alterações nas páginas Minha conta.

Para começar com o processo, em seu painel de administração do WordPress , vá para Aparência > Editor de temas para abra seu editor de temas .

Em seguida, vá para o arquivo functions.php na lista de Arquivos de Tema na barra lateral direita. Agora, usando o editor, você pode adicionar suas funções personalizadas ao arquivo de funções do seu tema filho.

Renomeando abas usando WooCommerce Hooks

Para renomear uma guia usando ganchos do WooCommerce, adicione o seguinte script ao seu arquivo functions.php . Este script renomeará sua guia Endereços para Seus endereços , mas você poderá editar o script e usar o nome desejado.

 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;
} 

Em seguida, salve as alterações e verifique o frontend para ver as alterações.

Você também pode editar este script e alterar qualquer um dos nomes de suas guias. Para fazer isso, basta alterar o nome do array $items . Você pode conferir a lista completa de slugs disponíveis para o array $items aqui.

 $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' ),
);

Por exemplo, se você quiser renomear a guia Orders para Your Orders , você pode modificar a 3ª linha do script para $items['orders'] = 'Your Orders'. Você também precisa alterar o nome do filtro para QuadLayers_rename_orders_tab para que sua nova função não tenha o mesmo nome da anterior. Então, com essas mudanças, seu novo script será:

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_orders_tab', 9999 );
function QuadLayers_rename_orders_tab($items) {
$items['orders'] = 'Seus pedidos';
retornar $itens;
}

Dessa forma, você pode editar o arquivo functions.php e renomear todas as suas abas. Quando estiver satisfeito com as alterações, clique em Atualizar arquivo e pronto.

Excluindo abas usando ganchos WooCommerce

Além de renomear as guias, você também pode excluir guias na página Minha conta usando a função unset() com o array $items. Por exemplo, para remover a guia Detalhes da conta , você precisa usar o script a seguir.

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
function QuadLayers_remove_acc_tab($items) {
unset($items['edit-account']);
retornar $itens;
} 

Salve as alterações e verifique o frontend. Você verá que a guia Detalhes da conta não está lá.

Usando o mesmo script, você pode ajustá-lo e remover qualquer guia que desejar. Por exemplo, se você deseja ocultar a guia de downloads, você deve alterar o nome da função e o array de itens de $items['edit-account'] para $items['downloads']. Então agora seu novo script será algo assim.

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

Em seguida, clique em Atualizar arquivo para aplicar as alterações. Estas são apenas algumas coisas que você pode fazer para personalizar a página Minha conta no WooCommerce, mas você não está limitado apenas a excluir e renomear. Você também pode mesclar guias, criar guias personalizadas e muito mais. Para saber como aproveitar ao máximo sua página Minha conta programaticamente, recomendamos que você siga nosso guia passo a passo.

Conclusão

E isso conclui nosso guia sobre como personalizar a página Minha conta do WooCommerce . Isso ajudará você a melhorar a experiência do cliente e a se destacar dos concorrentes.

Quanto à nossa recomendação sobre qual método usar para editar a página Minha conta, depende de suas necessidades e habilidades. Se você não tem habilidades de codificação ou não quer editar os arquivos de template do seu tema, os plugins são sua melhor opção. Esta alternativa é mais conveniente e amigável para iniciantes. Além disso, você garante que não quebrará nada em sua instalação do WordPress usando funções e modelos personalizados.

Neste post, mostramos alguns dos 3 melhores plugins para editar a página Minha Conta. Se você quiser dar uma olhada em algumas outras opções, confira este post. Por outro lado, se você souber codificar e quiser flexibilidade total, poderá personalizar a página Minha conta programaticamente. Para isso, você pode substituir os arquivos de modelo padrão do WooCommerce ou usar ganchos do WooCommerce.

Neste guia, mostramos como usar ganchos, mas se você quiser mais informações sobre como personalizar a página Minha conta com scripts personalizados, recomendamos que você dê uma olhada neste tutorial.

• Como personalizar a página da loja no WooCommerce
• Personalize o botão Adicionar ao carrinho no WooCommerce
• Como editar o Checkout WooCommerce (Codificação e Plugins)
• Como personalizar a página do produto WooCommerce no Divi

Por fim, independentemente do método escolhido, informe-nos nos comentários se tiver algum problema ao configurar sua página Minha conta.