WooCommerce: Como personalizar modelos de e-mail sem codificação

Em uma base diária, você provavelmente usa arrastar e soltar em uma variedade de interfaces. Por exemplo, arraste e solte seus itens do Gmail em sua categoria, faça upload de arquivos para a biblioteca de mídia do WordPress ou organize os aplicativos da tela inicial do seu telefone.

Embora muitas plataformas de construtores de páginas apareçam para ajudá-lo a projetar seu site com arrastar e soltar, a criação de emails transacionais do WooCommerce ainda é considerada uma tarefa complexa.

Por padrão, as configurações de e-mail do WooCommerce só permitem que você altere os perfis de cores e o texto básicos. Para personalizar ainda mais, você terá que modificar o código do tema.

Se você não é um técnico e não quer quebrar o código entre os scripts em wp-content/plugins/woocommerce/templates/emails/email-styles.php ou algo assim, usando uma estrutura de construtor de e-mail de arrastar e soltar é a melhor solução.

Apresentando o Yay Mail

YayMail é uma plataforma de criação de e-mail implantada para WooCommerce.

Ele foi desenvolvido com a facilidade de uso como objetivo principal, mas foi testado para máxima compatibilidade com navegador da Web e cliente de e-mail, mantendo-se atento à capacidade de resposta.

Você pode baixá-lo e usá-lo gratuitamente no WordPress.org. Este código-fonte aberto é gratuito para sempre e você não precisará atualizar para nenhuma versão premium para personalizar totalmente todos os modelos de e-mail padrão do Woo.

Agora que você o instalou e ativou, vá para WooCommerce > Email Customizer para acessar o editor de email.

Crie emails usando o construtor de email de arrastar e soltar

Como um editor de arrastar e soltar semelhante ao construtor de páginas Elementor, o YayMail vem com todas as opções e configurações na mesma tela.

1. Barra de ferramentas superior

Aqui você encontrará o primeiro menu suspenso para todos os modelos de e-mail WooCommerce disponíveis. Dependendo dos plugins WooCommerce ativos em seu site atual, você verá novos modelos aqui.

Se estiver usando um plug-in de associação do WooCommerce, você terá modelos de e-mail extras, como Membership – Welcome, Membership Reminder, Expired Membership e assim por diante.

A segunda lista suspensa, “Pedido de amostra”, permite que você escolha qualquer pedido real para ver como os campos dinâmicos do e-mail são exibidos no final de um comprador específico.

Nesta barra de ferramentas superior, você também pode encontrar os botões de ação mais usados, incluindo:

• Códigos de acesso : Copie um código de acesso daqui e cole-o no bloco apropriado do design do email.
• Enviar e-mail de teste : um clique para enviar uma mensagem de teste para qualquer endereço de e-mail para ver como seu e-mail criado ficaria na caixa de entrada.
• Em branco : Limpe todos os blocos de e-mail para que você possa ter uma tela completamente em branco e começar a projetar para seus próprios propósitos.
• Copiar modelo : Copie de um modelo criado anteriormente e cole-o no corpo do e-mail atual. Então você pode fazer alguns pequenos ajustes, para evitar começar do zero.
• Redefinir modelo : esta opção redefine seu modelo para o estado inicial, o que significa que você ainda tem os blocos de e-mail padrão.
• Visualização : veja instantaneamente seu e-mail personalizado em visualizações para desktop e dispositivos móveis.
• Salvar : Salve suas edições a qualquer momento.

2. Painel lateral dobrável

O painel lateral do personalizador de e-mail YayMail WooCommerce consiste em duas guias: Elementos e Configurações .

Todos os elementos são arrastáveis ​​e incluem várias opções de personalização. O bloco de cabeçalho, por exemplo, permite editar seu preenchimento, cor de fundo, cor do texto, família de fontes e outras opções visuais.

Enquanto as alterações na guia Elementos se aplicam apenas ao bloco escolhido, os ajustes em Configurações têm efeito para todo o modelo de email.

Alguns recursos usados ​​com frequência incluem:

• Largura do contêiner de e-mail
• Cor de fundo periférica
• Ocultar/Mostrar imagem do produto e SKU
• Exportar/Importar modelos de e-mail

3. Visualização de e-mail

Como é um construtor de e-mail baseado em blocos, você pode mover qualquer bloco para cima/para baixo ou usar a alça para arrastá-lo e soltá-lo.

No canto direito, você terá algumas opções como:

• Duplicar o bloco de e-mail
• Copie o bloco para outro modelo
• Remover bloco

Com o YayMail, existem infinitas personalizações que você pode fazer alterando os designs e layouts de e-mail, o que não acontece se você modificar os arquivos de código do tema ou usar o personalizador do WordPress.

Estudo de caso: personalize o e-mail de confirmação de pedido do WooCommerce

Para começar a personalizar o email de confirmação do pedido, vá para WooCommerce > Email Customizer > Email para mostrar. A partir daí, você pode escolher Ordem de processamento ou Ordem concluída .

A partir de então, você pode começar a adicionar os elementos que desejar. Alguns elementos que vou usar incluem:

• Logo : Carregue uma imagem de logotipo transparente e redimensione-a para alinhá-la com a largura do contêiner de e-mail
• Ícones sociais : escolha facilmente os ícones das redes sociais e adicione o URL para cada plataforma
• Título : Edite o texto do título, a fonte do título, a cor do texto e a cor do plano de fundo
• Imagem : adicione uma imagem personalizada e ajuste sua largura usando a barra deslizante
• Rodapé : Adicione os links do seu site, como Minha conta, Suporte ao cliente, etc.

A qualquer momento, você pode clicar no botão Visualizar para ver a aparência do e-mail no desktop/móvel em um pop-up sem precisar sair ou atualizar a página atual.

Em seguida, você pode fechar facilmente o visualizador para voltar ao editor.

Para ver o YayMail em ação, confira este vídeo tutorial para ver como ele ajuda você a fazer o trabalho.

Integrações

O e-mail transacional é um bom meio de comunicação para sua finalidade de marketing. Especialmente quando você oferece um modelo de assinatura ou associação por meio do WooCommerce, você deve personalizar as notificações por e-mail para tornar o perfil da sua marca personalizado e consistente.

Estudo de caso 1: plugin WooCommerce Membership

Por padrão, é isso que seu público recebe quando a associação ao seu site está expirando. Você pode editar o texto do assunto, do cabeçalho e da mensagem personalizada.

Por que não transformar este modelo de e-mail em uma chamada à ação para garantir que o público volte ao seu pacote de associação?

Para este conteúdo extra, usarei várias colunas para a mensagem de e-mail Expiring Membership.

Os passos são os seguintes:

• Arraste e solte um bloco de 2 colunas no e-mail
• Edite a largura da coluna em porcentagem, ou seja, 70/30
• Adicione cor de fundo ou imagem (opcional), aqui eu uso branco como cor de fundo
• Escolha um bloco de texto para a primeira coluna
• Escolha uma faixa de imagem para a segunda coluna

É assim que consigo um modelo de email de várias colunas para as mensagens de email de associação.

Estudo de caso 2: plug-in de e-mails de acompanhamento do WooCommerce

Com uma extensão de modelo de e-mail personalizado, como Follow-Ups, você pode enviar conteúdo extra após a realização de ações específicas do cliente.

Existem muitos cenários de loja nos quais e-mails automáticos programados com conteúdo personalizado podem ser enviados.

Nesta seção, estou demonstrando como criar e personalizar o modelo de e-mail a ser enviado após o uso de um cupom .

Em primeiro lugar, comece a adicionar um novo acompanhamento:

• Dê um nome, assunto de e-mail e algum conteúdo
• Na metabox Tipo de acompanhamento, certifique-se de escolher Email de compra
• Nas caixas inferiores, escolha o gatilho como “após o uso do cupom”
• Ele vem com muitas opções avançadas, então fique à vontade para explorá-lo

Então, vamos seguir as etapas de personalização:

• Inserir logotipo e título
• Adicionar um elemento de caixa de imagem
• Inserir conteúdo e ícones sociais

Como estou tentando definir o tom dos perfis de cores da minha marca, uma cor rosada será usada para a cor de fundo do cabeçalho e também a imagem principal no elemento caixa de imagem.

Projetar os blocos é fácil, então tudo o que resta a fazer é ajustar o preenchimento entre os blocos de e-mail para obter a aparência que você sempre quis.

Nota rápida: consulte os documentos deles para garantir que você obtenha o complemento YayMail correto para suas extensões ativas atuais do WooCommerce.

Estudo de caso 3: plugins de recompensas de fidelidade

Uma extensão de pontos e recompensas para WooCommerce pode gerar mais de 10 notificações por e-mail para entrar em contato com os clientes.

Os modelos de e-mail variam dependendo do plugin que você usa, mas basicamente parece uma mensagem de texto. Nas configurações de Notificação de pontos, você pode escrever suas próprias mensagens na caixa Descrição do e-mail usando seu código de acesso.

Em seguida, salve as alterações e acesse nosso personalizador de e-mail WooCommerce. Na lista suspensa, escolha o e-mail de pontos e recompensas para começar a personalizar o modelo.

Vamos incrementar adicionando mais alguns elementos de mídia, como imagens, botões e links.

Este novo design terá efeito em todas as notificações de Pontos a serem enviadas. Apenas que o bloco de aviso do meio será substituído pelas mensagens que você acabou de escrever na etapa anterior.

Conclusão

Existem vários métodos para personalização de modelos de e-mail WooCommerce sem codificação. Se a modificação do código-fonte não for sua escolha, você pode tentar personalizar os e-mails com a ajuda de plugins.

Alguns plugins utilizam o personalizador do WordPress para criar modelos de email. No entanto, um construtor de e-mail de arrastar e soltar ajudará você a criar um layout muito mais flexível com opções avançadas.

Hoje você pode experimentá-lo baixando o YayMail do repositório WP e usá-lo completamente sem riscos, pois funciona perfeitamente com todos os temas do WordPress.