Como personalizar e-mails do WooCommerce + visualizá-los antes de enviar
Publicados: 2022-04-15Lutando com como personalizar e-mails WooCommerce ?
O WooCommerce já oferece e-mails transacionais automatizados para mais de 10 ações, como novos pedidos, pedidos processados e novas contas. No entanto, você provavelmente desejará personalizar esses e-mails para torná-los seus.
Neste tutorial passo a passo, você aprenderá como personalizar e-mails do WooCommerce usando as configurações internas do WooCommerce, bem como alguns plugins gratuitos ou pagos que você pode usar para obter ainda mais controle sobre os e-mails da sua loja.
Índice:
Por que você deve personalizar os e-mails do WooCommerce?
- Para mudar do roxo padrão do WooCommerce para uma cor mais adequada para sua marca.
- Para adicionar personalização e uma voz de marca aos modelos de e-mail.
- Para alterar configurações como o nome “De” ou o endereço “De”.
- Para adicionar elementos de mídia como um logotipo, imagem de cabeçalho ou GIFs animados.
- Para desativar algumas das mensagens automatizadas que não se adequam à sua operação.
- Para vincular a páginas de suporte, upsells ou promoções.
- Para alternar entre os tipos de e-mail HTML e de texto.
- Para visualizar a aparência do e-mail antes de ativá-lo para automação.
Como personalizar e-mails WooCommerce
Com apenas as configurações internas do WooCommerce, você pode personalizar várias partes de seus e-mails do WooCommerce, incluindo:
- Opções de remetente de e-mail ️
- O tema geral do e-mail
- Conteúdo de e-mail específico
Mostraremos como personalizar essas configurações internas abaixo. Então, depois disso, também compartilharemos alguns plugins de personalização de e-mail WooCommerce que oferecem ainda mais flexibilidade, se necessário.
Passo 1: Vá para as configurações de e-mail no WooCommerce
No painel do WordPress, navegue até WooCommerce > Configurações > Emails . Aqui, você verá um título para Notificações por e-mail , juntamente com uma lista desses e-mails de notificação padrão que o WooCommerce já configurou para você.

Etapa 2: personalizar as opções e o modelo do remetente de e-mail
Role a lista de notificações por e-mail para encontrar a seção chamada "Opções de remetente de e-mail".
Você verá dois campos:
- Nome “De”: o nome que os clientes veem quando recebem um e-mail – mantenha o nome da empresa ou, potencialmente, uma pessoa real, se fizer parte de sua estratégia de marca.
- Endereço "De": o endereço de e-mail "de" que os usuários podem entrar em contato se responderem ao e-mail automatizado.
Modifique esses campos conforme necessário.

Na seção Modelo de email , você pode começar a personalizar elementos como:
- Imagem de cabeçalho
- Texto de rodapé
- Cor básica
- Cor de fundo do corpo
- Cor do corpo do texto
Se você quiser adicionar uma imagem de cabeçalho personalizada ao e-mail, cole o URL da imagem no campo Imagem de cabeçalho . Você pode hospedar uma imagem em sua biblioteca de mídia do WordPress e obter o URL da imagem de lá.
Também recomendamos remover o texto “Construído com WooCommerce” do rodapé. Você pode adicionar o que quiser no rodapé.

Mais abaixo, na área Modelo de email , você encontrará configurações de cores para o modelo de email geral do WooCommerce. Como mencionado anteriormente, o WooCommerce adiciona automaticamente seu roxo padrão como cor base, que não é o que você deseja ao executar uma loja online .
Escolha uma cor que corresponda à sua marca como a cor base e considere alterar os outros campos de cores, se necessário.
Clique em Salvar alterações quando terminar.

Etapa 3: personalize emails específicos do WooCommerce
De e-mails de novos pedidos a e-mails de pedidos concluídos , o WooCommerce fornece modelos predefinidos que são enviados automaticamente para administradores e clientes do site para manter todos informados sobre os pedidos. No entanto, você desejará personalizar alguns desses e-mails para incluir seu próprio conteúdo e remover alguns padrões desnecessários do WooCommerce.
Conclua essas personalizações de e-mail individuais clicando em Gerenciar ao lado do e-mail que deseja editar. Não é uma má ideia começar pelos e-mails “Processing Order” e “Completed Order” , pois esses são os mais vistos pelo cliente.

Percorra os seguintes campos com base em suas necessidades:
- Habilitar desabilitar
- Sujeito
- Cabeçalho do e-mail
- Conteúdo adicional
Sugerimos manter todos os e-mails do WooCommerce ativados, a menos que você tenha uma circunstância única em que não precise de um deles ou se pretenda usar um plug-in separado para e-mails transacionais.
Campos como Assunto , Título do e-mail e Conteúdo adicional ditam o conteúdo geral do e-mail, portanto, ajuste-os conforme necessário.

Clique no botão “?” ícones para ver quais espaços reservados dinâmicos estão disponíveis para inserção nos campos de conteúdo. Por exemplo, você pode usar um espaço reservado para que o WooCommerce preencha um link para seu site em cada e-mail.

Etapa 4: transforme-o em um email em HTML ou texto simples
Clique no campo Tipo de e-mail para ver suas opções. Escolha um dos seguintes:
- Texto simples: e-mails sem imagens ou formatação
- HTML: e-mails com conteúdo avançado, como imagens, tabelas e formatação
- Multipart: este alterna dinamicamente entre texto simples e HTML com base no cliente de email do usuário, pois alguns clientes não suportam emails HTML
Etapa 5: considere editar o modelo HTML
Na parte inferior da página, você verá uma seção chamada "modelo HTML". O WooCommerce não possui um editor de arrastar e soltar para seus e-mails, mas você pode personalizar o código HTML de cada e-mail.

Clique no botão View Template para ver seu código.

O WooCommerce bloqueia seu modelo HTML padrão, então você não pode editar nada. No entanto, você pode clicar no botão Copiar arquivo para tema para substituir e editar o modelo.

Depois disso, você pode colocar o cursor no editor de texto e fazer alterações. Recomendamos usar esta seção apenas se você tiver experiência com HTML.

Se você não se sentir à vontade para editar este código diretamente, talvez queira contratar um desenvolvedor do WordPress. Ou você pode experimentar um dos plugins de e-mail WooCommerce que compartilharemos na próxima seção.
E é assim que você personaliza os e-mails do WooCommerce! Clique no botão Salvar alterações para finalizar o processo.

Como visualizar e-mails do WooCommerce
Você deve visualizar seus e-mails transacionais antes que eles sejam enviados aos clientes. Dessa forma, você pode verificar erros de ortografia, marca WooCommerce que precisa ser alterada e oportunidades de promoções ou upsells.
Veja como visualizar seus e-mails do WooCommerce.
Etapa 1: visualizar uma visualização visual do seu modelo geral de e-mail
Em WooCommerce > Configurações > Emails , encontre a seção Modelo de email e clique no link que diz “Clique aqui para visualizar seu modelo de email”.

Isso abre uma nova janela do navegador mostrando o e-mail com as configurações gerais de e-mail especificadas. Você deve ver novas cores, uma imagem de cabeçalho e um rodapé editado se tiver alterado tudo isso. Lembre-se de que o conteúdo da visualização do modelo permanece genérico.

Etapa 2: execute transações de teste para visualizar os emails individuais com conteúdo dinâmico
Você provavelmente deseja ver os e-mails reais que são enviados aos clientes, mas o WooCommerce não possui os recursos para visualizar essas visualizações visuais. Em vez disso, você deve executar transações de teste para acionar os e-mails para sua própria caixa de entrada.
Aqui está como fazê-lo:
- Certifique-se de ter o WooCommerce Payments e o método de pagamento Stripe ativados.
- Adicione um item ao seu carrinho e preencha as informações como se você fosse um cliente.
- No campo E- mail , adicione seu endereço de e-mail.
- No campo do cartão de crédito, use um dos cartões de teste do Stripe para processar um pagamento.
- Finalize o check-out.
A transação de teste deve enviar a você um e-mail de processamento de pedidos , que permite ver como os e-mails são renderizados para os clientes. Verifique se as tags dinâmicas aparecem corretamente e se toda a sua identidade visual e o texto inserido são exibidos corretamente.

Para acionar outros e-mails, vá para WooCommerce > Pedidos e ajuste o campo Status para outra coisa. Por exemplo, você pode alterná-lo para Concluído para acionar o e-mail de Pedido Concluído do WooCommerce. Certifique-se de clicar no botão Atualizar para salvar a alteração.

Em seguida, ele envia para sua caixa de entrada para você revisar.

Para simplificar o processo, você pode considerar um plugin como o WooCommerce Email Test.
Plugins que ajudam a personalizar os e-mails do WooCommerce
Vários plugins fornecem ferramentas avançadas de personalização de e-mail do WooCommerce, expandindo os recursos atuais do WooCommerce ou substituindo-os completamente para uma experiência mais amigável (geralmente arrastar e soltar).
Aqui estão alguns plugins de personalização do WooCommerce a serem considerados:
Você também pode substituir os e-mails transacionais do WooCommerce por um serviço de marketing por e-mail, como Omnisend, MailPoet ou Sendinblue, que oferecem automação de comércio eletrônico e opções adicionais para coisas como recuperação de carrinho abandonado.
Personalize seus e-mails WooCommerce hoje
Neste artigo, abordamos:
- Por que você deve personalizar os e-mails do WooCommerce.
- Como personalizar as configurações gerais e o design de seus e-mails WooCommerce.
- Como personalizar emails transacionais específicos.
- Como assumir o controle do HTML do e-mail se você tiver experiência.
- Plugins para adicionar mais funcionalidades aos e-mails do WooCommerce, como arrastar e soltar e ferramentas visuais.
A maioria das lojas de comércio eletrônico iniciantes pode se safar com as personalizações básicas de e-mail do WooCommerce, mas recomendamos eventualmente pagar por um editor de e-mail premium, como um dos plugins ou software de marketing por e-mail que abordamos acima.
Depois de descobrir os e-mails transacionais da sua loja, você pode ler nosso guia sobre marketing por e-mail WooCommerce para acertar seus e-mails de marketing também.
Se você precisar de algum esclarecimento sobre como personalizar e-mails do WooCommerce, ou gostaria de compartilhar quaisquer dicas que você tem com outros usuários editando seus e-mails, deixe-nos uma nota nos comentários!