Como Personalizar os E-mails de Pedido do WooCommerce

Os e-mails de pedido do WooCommerce geralmente são comunicações automáticas e rotineiras. Mas também representam uma oportunidade valiosa para sua empresa se conectar diretamente com os clientes. Cada e-mail é uma chance de construir confiança, reforçar a identidade da sua marca e causar uma impressão duradoura que incentive compras futuras.

Infelizmente, os modelos de e-mail padrão do WooCommerce não causam o impacto que a maioria das empresas deseja. O design genérico e as opções limitadas de personalização fazem com que eles pareçam impessoais e não representem a identidade exclusiva da sua marca. Sem personalização, você está perdendo a chance de se conectar com seus clientes de forma significativa.

Felizmente, é possível personalizar os e-mails de pedidos do WooCommerce para que se destaquem. E há várias maneiras de fazer isso. Você pode usar as configurações nativas, instalar plugins ou escrever código personalizado. Independentemente da opção escolhida, é possível criar e-mails com aparência profissional e que proporcionem uma experiência melhor ao cliente.

Neste artigo, mostramos como transformar e-mails básicos em comunicações excepcionais. Apresentamos soluções com plugins para resultados rápidos e também opções com código, ideais para quem busca controle total.

Vamos começar!

Configurações padrão de e-mails do WooCommerce que você precisa conhecer

O WooCommerce vem com um conjunto de modelos de e-mail padrão projetados para lidar com as principais interações com o cliente, como confirmações de pedidos, atualizações de envio e reembolsos. Esses modelos usam espaços reservados para inserir dinamicamente detalhes do pedido, como nomes de clientes, informações sobre produtos e preços. Embora esses e-mails integrados cubram o básico e certamente forneçam informações relevantes aos seus clientes, eles deixam a desejar quando se trata de design e identidade visual.

Os modelos de e-mail padrão do WooCommerce seguem um design simples e funcional. Eles apresentam layouts básicos, esquemas de cores discretos e formatação de conteúdo básica. Embora essa abordagem garanta compatibilidade com a maioria dos clientes de e-mail, ela também limita sua capacidade de criar uma experiência memorável para o cliente. Os e-mails não refletem o estilo exclusivo da sua marca nem oferecem muita flexibilidade para adicionar toques personalizados.

Essas limitações dificultam o destaque na caixa de entrada dos seus clientes, especialmente em mercados competitivos. É por isso que personalizar os e-mails do WooCommerce é tão importante. Isso permite elevar a qualidade da sua comunicação e criar uma conexão mais forte com seu público.

Vamos explorar como você pode personalizar esses modelos usando o painel de configurações integrado do WooCommerce.

Como personalizar os e-mails de pedidos do WooCommerce usando o painel de configurações

O WooCommerce oferece opções de personalização integradas que permitem que você faça ajustes rápidos nos e-mails de pedidos sem precisar de plugins ou códigos personalizados. Essas configurações podem ser acessadas pelo painel do WordPress e se concentram em elementos de identidade visual, como a logo, cores e texto básico. Embora essas opções sejam um bom ponto de partida, elas têm limitações que podem deixar você querendo mais.

Como acessar o painel de configurações

Para começar, vá para WooCommerce > Settings > Emails no painel do WordPress. A partir daí, você verá uma lista de tipos de e-mail como New order, Canceled order, e Completed order. Todos esses são e-mails diferentes que o WooCommerce envia a você ou a seus clientes, dependendo da situação.

Clique no botão Manage de qualquer tipo de e-mail para personalizar detalhes específicos, mas para o design geral do e-mail, role para baixo além desses e-mails para chegar às opções de modelo.

Opções de personalização disponíveis

Depois de rolar até o título Email template (Modelo de e-mail), você pode fazer algumas alterações na aparência do modelo de e-mail padrão.

Aqui, você pode personalizar atributos como a cor primária do e-mail, a cor do plano de fundo e a cor do texto do corpo. Essas pequenas alterações podem ajudar seus e-mails a corresponderem ao esquema de cores da sua marca. Ou seja, os e-mails pelo menos corresponderão ao seu site.

Você também pode personalizar a imagem do cabeçalho e o texto do rodapé, onde poderá incluir um slogan, o nome da empresa ou informações de contato. Essas pequenas alterações podem fazer com que seus e-mails pareçam mais profissionais e personalizados.

Limitações das configurações integradas

Embora essas ferramentas permitam aplicar uma identidade visual básica, elas não oferecem controle criativo completo. Por exemplo:

• O layout dos e-mails permanece fixo, portanto, você não pode reorganizar elementos ou adicionar novas seções.
• As fontes não podem ser personalizadas além dos estilos padrões que o site usa.
• Não há como você incluir elementos dinâmicos, como recomendações de produtos ou links de upsell.

Essas limitações fazem com que o painel de configurações seja uma boa opção para pequenos ajustes, mas não é o ideal para empresas que desejam oferecer uma experiência altamente personalizada. E pode esquecer se o seu objetivo é adicionar interatividade.

Usando plugins ou extensões para personalização avançada de e-mails de pedidos no WooCommerce

Se as configurações integradas do WooCommerce não oferecerem a flexibilidade de que você precisa, os plugins ou as extensões de WooCommerce podem ajudá-lo a criar e-mails de pedidos personalizados com recursos avançados. Com essa abordagem, é possível ir além do básico da identidade visual para criar layouts exclusivos e incluir elementos dinâmicos, como links de upsell e recomendações de produtos.

Os plugins também apresentam alguns desafios. Alguns plugins podem criar conflitos com outras extensões, plugins ou temas do WooCommerce, causando problemas de funcionalidade.

Às vezes, as atualizações do WooCommerce ou do WordPress também podem interromper a funcionalidade do plugin. Além disso, se algo der errado, a depuração dos problemas do plugin pode ser demorada, especialmente se você não estiver familiarizado com esse tipo de solução de problemas.

Aqui estão três plugins e extensões populares para personalizar os e-mails de pedidos do WooCommerce, juntamente com seus principais recursos:

1. Email Customizer for WooCommerce

A extensão Email Customizer for WooCommerce adiciona um editor de arrastar e soltar para personalizar layouts de e-mail no WooCommerce. Você pode adicionar elementos como logos, texto, imagens e botões, oferecendo controle total sobre o design do e-mail.

Os principais recursos incluem modelos predefinidos, opções para incluir conteúdo personalizado, como ofertas de upsell ou mensagens personalizadas, e pré-visualizações em tempo real para acompanhar as alterações conforme você as aplica.

2. Kadence WooCommerce Email Designer

O plugin Kadence WooCommerce Email Designer oferece uma maneira direta de você criar e-mails mais bonitos e funcionais. Ele é totalmente compatível com o WooCommerce e permite editar fontes, cores e layouts.

Alguns recursos notáveis incluem visualizações de e-mail em tempo real para você verificar as alterações, personalização super simples do cabeçalho, rodapé e conteúdo do corpo e suporte para importação ou exportação de designs para reutilização em diferentes sites.

3. YITH WooCommerce Email Templates

O plugin YITH WooCommerce Email Templates se concentra em fornecer uma biblioteca de modelos de e-mail projetados profissionalmente. É ideal se você quiser um visual sofisticado sem gastar horas com design. Ele oferece uma variedade de estilos de modelos para você escolher, opções para incluir ícones de mídia social, marca e conteúdo dinâmico, e funciona bem com outras extensões do WooCommerce.

Como personalizar os e-mails de pedidos do WooCommerce com um plugin

Para este tutorial, vamos usar o plugin Kadence WooCommerce Email Designer como exemplo. Veja a seguir como você pode instalar e usar o plugin para personalizar seus e-mails:

Instale e ative o plugin

Vá para o painel do WordPress e navegue até Plugins > Add New. Procure por Email Customizer for WooCommerce, clique em Install Now e ative o plugin.

Personalize os modelos de e-mail

Vá para WooCommerce > Email Customizer em seu painel. Use o editor para personalizar o layout do seu e-mail. Você pode adicionar elementos de marca como sua logo, alterar as cores para combinar com sua marca e incluir texto personalizado. Você também pode selecionar um modelo predefinido.

Adicione elementos dinâmicos

Adicione links de upsell para incentivar compras repetidas. Por exemplo, você pode incluir um botão que promova produtos relacionados.

Nesse ponto, você também pode inserir provas sociais, como avaliações de clientes ou crachás de confiança, para aumentar a credibilidade.

Salve e teste seus e-mails

Salve o design de e-mail personalizado e use a ferramenta de visualização integrada para verificar a aparência. Teste o envio para você mesmo, garantindo que tudo esteja exibido corretamente. Para isso, clique em Enviar e-mail de teste na parte inferior do personalizador.

Plugins oferecem uma forma poderosa de aprimorar seus e-mails de pedido. No entanto, se você enfrentar problemas frequentes de compatibilidade, o uso de código personalizado pode ser uma solução mais confiável a longo prazo.

A seguir, veremos como personalizar e-mails do WooCommerce usando código para obter controle total.

Como personalizar os e-mails de pedidos do WooCommerce com código personalizado

Se você precisa de controle total sobre os e-mails de pedidos do WooCommerce, o código personalizado é o caminho a seguir. Ao contrário dos plugins, que dependem de recursos pré-construídos (que ainda podem fazer com que você se sinta um pouco limitado), a codificação dá a você a liberdade de criar e-mails que combinem perfeitamente com a sua marca e incluam recursos específicos para a sua empresa. Também é uma solução mais escalável, pois você não está vinculado a softwares de terceiros que podem se tornar incompatíveis ou desatualizados com o tempo.

Para isso, será necessário trabalhar com os hooks e modelos nativos do WooCommerce. Dessa forma, você consegue personalizar todos os aspectos dos seus e-mails — desde o cabeçalho e rodapé até elementos dinâmicos baseados em dados, como recomendações personalizadas de produtos. E o resultado?

Uma experiência de e-mail totalmente personalizada, que reflete a identidade da sua marca e mantém seus clientes engajados. Vamos começar com um exemplo básico.

Exemplo básico de e-mail de pedido do WooCommerce baseado em código

O WooCommerce oferece vários hooks e filtros que você pode usar para personalizar o conteúdo do seu e-mail. Por exemplo, você pode se conectar aos filtros woocommerce_email_headers e woocommerce_email_footer para modificar cabeçalhos e rodapés de e-mail ou qualquer outra coisa que queira fazer.

Aqui está um exemplo rápido de como você pode adicionar um rodapé personalizado aos e-mails de pedidos:

add_filter('woocommerce_email_footer_text', 'custom_email_footer_text');
function custom_email_footer_text( $footer_text ) {
    $footer_text = 'Thank you for shopping with us! Check out our latest deals at <a href="https://yourwebsite.com">yourwebsite.com</a>.';
    return $footer_text;
}

Você pode adicionar esse snippet ao arquivo functions.php do seu tema filho (child theme).

Aprimorando o design com HTML e CSS

Se você quiser que seus e-mails tenham uma aparência refinada e visualmente atraente, editar os modelos de e-mail de WooCommerce usando HTML e CSS é uma ótima opção. O WooCommerce armazena seus modelos de e-mail na pasta woocommerce/email do seu tema. Se você modificar esses modelos, poderá ajustar o layout, a tipografia e o design para criar e-mails que façam sentido para a sua loja.

Por exemplo, para adicionar um cabeçalho personalizado ao e-mail “Customer Completed Order” (Pedido concluído pelo cliente), você pode editar o arquivo customer-completed-order.php localizado na pasta woocommerce/emails.

Veja como:

Primeiro, copie o arquivo customer-completed-order.php para a pasta woocommerce/emails do seu tema. Isso garante que suas alterações não sejam substituídas durante as atualizações do WooCommerce.

Em seguida, adicione seu conteúdo de cabeçalho personalizado na parte superior do arquivo.

Por exemplo, você poderia adicionar algo assim:

<div style="background-color: #FFFF44; padding: 20px; text-align: center;">
    <img src="https://yourwebsite.com/logo.png" alt="Your Logo" style="max-width: 150px;">
    <h2 style="font-family: Arial, sans-serif; color: #333;">Your Order is Complete!</h2>
</div>

Esse snippet de código adiciona sua logo à parte superior central do e-mail e adiciona uma cor de fundo amarela à área do cabeçalho:

Os clientes de e-mail geralmente removem estilos externos, portanto, é importante que você use CSS embutido para fins de compatibilidade. Isso garante que seu design tenha uma aparência consistente em todos os dispositivos e plataformas de e-mail.

Ao aprimorar seus e-mails com HTML e CSS, você tem controle preciso sobre a aparência deles. Apenas certifique-se de manter seus designs compatíveis com dispositivos móveis usando elementos responsivos, como larguras baseadas em porcentagem e consultas de mídia, quando necessário.

Como adicionar elementos dinâmicos aos e-mails de pedidos do WooCommerce

Os elementos dinâmicos podem tornar seus e-mails de pedidos do WooCommerce ainda mais envolventes. Eles permitem criar mensagens mais personalizadas e, em alguns casos, até interativas. Com os hooks e filtros do WooCommerce, é fácil incluir esses elementos diretamente nos templates dos e-mails, criando oportunidades para aumentar o engajamento.

Exemplo: Adicionar recomendações personalizadas de produtos

Você pode usar os hooks do WooCommerce para incluir recomendações de produtos relacionados ou de upsell específicos para o pedido de cada cliente. Por exemplo, você pode exibir produtos complementares com base nos itens do carrinho do cliente.
Para começar, adicione o conteúdo dinâmico com um hook como este:

add_action('woocommerce_email_after_order_table', 'add_related_products_to_email', 10, 4);
function add_related_products_to_email( $order, $sent_to_admin, $plain_text, $email ) {
    if ( $email->id === 'customer_completed_order' ) {
        echo '<h3 style="font-family: Arial, sans-serif;">You might also like:</h3>';
        // Loop through order items
        foreach ( $order->get_items() as $item ) {
            $product_id = $item->get_product_id();
            // Get related products
            $related_products = wc_get_related_products( $product_id, 2 ); // Fetch 2 related products
            foreach ( $related_products as $related_id ) {
                $related_product = wc_get_product( $related_id );
                if ( $related_product && $related_product->is_visible() ) {
                    echo '<p style="font-family: Arial, sans-serif;">
                        <a href="' . esc_url( $related_product->get_permalink() ) . '">' . esc_html( $related_product->get_name() ) . '</a>
                    </p>';
                }
            }    
        }
    }
}

Esse snippet se conecta à ação woocommerce_email_after_order_table para exibir produtos relacionados abaixo dos detalhes do pedido no e-mail “Pedido concluído” do cliente.

Exemplo: Adicionar link dinâmico para solicitação de avaliação

Incentive os clientes a deixar uma avaliação incorporando um link personalizado no e-mail. Por exemplo:

add_action('woocommerce_email_footer', 'add_review_request_to_email');

function add_review_request_to_email() {
    // Safely output HTML for the review request
    echo '<p style="text-align: center; font-family: Arial, sans-serif;">
            We'd love your feedback! <a href="' . esc_url('https://yourwebsite.com/review') . '">Leave a review here</a>.
          </p>';
}

Esse snippet adiciona um Call to Action simples no rodapé do e-mail, convidando o cliente a deixar uma avaliação.

Exemplo: Inserir botões de redes sociais

Você também pode incluir botões de mídia social para se conectar com os clientes além do e-mail. Adicione o código a seguir para exibir ícones clicáveis no rodapé do e-mail:

add_action('woocommerce_email_footer', 'add_social_media_links');

function add_social_media_links() {
    // Safely output HTML for social media links
    echo '<div style="text-align: center; margin-top: 20px;">
            <a href="' . esc_url('https://facebook.com/yourbusiness') . '" style="margin-right: 10px;">
                <img src="' . esc_url('https://yourwebsite.com/facebook-icon.png') . '" alt="Facebook" style="width: 20px;">
            </a>
            <a href="' . esc_url('https://instagram.com/yourbusiness') . '">
                <img src="' . esc_url('https://yourwebsite.com/instagram-icon.png') . '" alt="Instagram" style="width: 20px;">
            </a>
          </div>';
}

Como testar suas personalizações

Depois de personalizar seus e-mails de pedidos do WooCommerce, o teste é essencial para garantir que tudo seja exibido corretamente e conforme planejado em diferentes dispositivos. Um processo de testes completo ajuda a identificar erros de formatação, links quebrados ou elementos ausentes antes que os clientes visualizem os e-mails.

Veja algumas ferramentas úteis que podem ajudar nesse processo:

• WP Mail Logging: O WP Mail Logging é um plugin popular que rastreia todos os e-mails enviados do seu site WordPress. Use-o para verificar se seus e-mails personalizados estão sendo enviados corretamente e revisar o conteúdo.
• Preview Emails for WooCommerce: Esse plugin permite que você visualize os e-mails do WooCommerce diretamente no painel do WordPress. É uma maneira rápida de você verificar suas personalizações sem fazer pedidos reais.
• Ferramentas de teste de clientes de e-mail: Plataformas como Litmus ou Email on Acid permitem que você visualize e-mails em diferentes clientes (como Gmail e Outlook) e dispositivos.

Você também pode visualizar seus e-mails em seu painel. Use o plugin Preview E-mails for WooCommerce para verificar o layout, as cores e o conteúdo de seus modelos personalizados. Certifique-se de que todos os elementos, como logos, texto e conteúdo dinâmico, apareçam conforme o esperado.

Em seguida, envie e-mails de teste para você ou para uma conta de teste para ver como eles ficam em uma caixa de entrada real. Verifique se há problemas como links quebrados, imagens ausentes ou erros de formatação.

Práticas recomendadas a serem seguidas para uma personalização eficaz de e-mails do WooCommerce

A personalização dos e-mails de pedidos do WooCommerce eleva a experiência do cliente — ou pelo menos pode fazer isso. Seguir boas práticas ajuda a garantir que o design dos seus e-mails seja eficaz, acessível e compatível com diferentes plataformas.

Aqui estão quatro etapas para garantir que todas as personalizações de e-mail que você fizer respeitem as práticas recomendadas atuais:

1. Mantenha o design responsivo e fácil de ler

Mais da metade de todos os e-mails são abertos em dispositivos móveis, portanto, o design responsivo não é negociável. Use CSS em linha para controlar layouts e garantir que suas fontes, botões e imagens sejam dimensionados adequadamente. Evite a desordem, adotando designs simples e limpos que priorizem a legibilidade.

2. Teste a compatibilidade com diferentes clientes de e-mail

Clientes de e-mails diferentes, como o Gmail e o Outlook, processam e-mails em HTML de forma diferente. Teste seus e-mails em várias plataformas e dispositivos para detectar inconsistências na formatação, nas cores ou na capacidade de resposta.

3. Inclua um Call to Action (CTA)

Todo e-mail de pedido deve ter uma finalidade além da confirmação da compra. Use CTAs para incentivar ações como deixar uma avaliação, pesquisar produtos relacionados ou inscrever-se em sua newsletter. Garanta que o CTA seja destacado e fácil de clicar, inclusive em dispositivos móveis.

4. Use linguagem simples e evite formatação excessiva

Escreva seus e-mails em um tom de conversa que seja fácil de entender. Se você sobrecarregar os e-mails com imagens, fontes em negrito ou layouts complexos, poderá desviar a atenção da mensagem e diminuir o tempo de carregamento.

Erros comuns e dicas de solução de problemas

Mesmo com um planejamento cuidadoso, as personalizações dos e-mails de pedidos do WooCommerce às vezes podem dar errado. Quer se trate de e-mails que não são enviados, layouts que quebram ou conteúdo dinâmico que não é atualizado, saber como solucionar problemas comuns poupará tempo e frustração a você.

Aqui estão os três principais problemas e como corrigi-los:

1. E-mails não são enviados após a personalização

Se os e-mails pararem de ser enviados após modificações, o problema pode estar no servidor de e-mails ou nas configurações. Veja como resolver:

• Verificar as configurações do servidor de e-mail: Verifique se o seu ambiente de hospedagem suporta e-mails transacionais. Os provedores de hospedagem gerenciada, como a Kinsta, oferecem entrega de e-mail otimizada para o WooCommerce.
• Verificar a configuração do SMTP: Use um plugin como o WP Mail SMTP para configurar um servidor SMTP confiável para o envio de e-mails. Teste a conexão para confirmar se os e-mails estão sendo enviados corretamente.

2. Conflitos de tema ou layouts quebrados

Modificações no layout podem gerar conflitos com o tema do WordPress e quebrar a aparência dos e-mails. Para resolver:

• Limpe o cache de modelos do WooCommerce: Vá para WooCommerce > Status > Tools e clique em Clear template cache. Isso força o WooCommerce a carregar seus modelos atualizados.

• Depure o código: Verifique seu código personalizado em busca de erros. Use ferramentas de depuração PHP ou o console do navegador para identificar possíveis falhas.
• Verifique as substituições de tema: Se o seu tema substitui os modelos de e-mail do WooCommerce, verifique se esses modelos estão atualizados e são compatíveis com a sua versão do WooCommerce.

3. O conteúdo não está sendo atualizado nos e-mails

Se suas alterações no conteúdo do e-mail não estiverem aparecendo, o problema pode estar relacionado a modelos substituídos ou ao posicionamento incorreto do código. Para depurar isso:

• Verifique os modelos de e-mail substituídos em seu tema: Acesse a pasta woocommerce/emails do seu tema e verifique se os modelos correspondem às alterações que você fez. Se necessário, copie novos modelos do diretório do plugin WooCommerce e reaplique suas personalizações.
• Verifique se os snippets estão no arquivo correto: Adicione trechos de PHP ao arquivo functions.php do seu tema filho (Child Theme) ou crie um plugin personalizado. Isso evita que suas alterações sejam perdidas ao atualizar o tema principal e garante compatibilidade.

Resumo

A personalização dos e-mails de pedidos do WooCommerce é uma das maneiras mais simples de fortalecer sua marca e melhorar a experiência do cliente. Personalizar esses e-mails para refletirem seu estilo é apenas outra maneira de criar confiança e incentivar a repetição de negócios ao longo do tempo.

Este artigo explorou vários métodos para você personalizar seus e-mails de pedidos do WooCommerce. Seja optando por soluções com plugins pela praticidade ou partindo para o código para ter controle total, ambos os caminhos permitem criar resultados impressionantes.

Não deixe que os modelos padrão limitem seu potencial. Reserve um tempo para otimizar seus e-mails e observe como isso afeta a satisfação e a retenção do cliente. E se cuidar do seu site WordPress estiver consumindo muito do seu tempo, considere uma hospedagem gerenciada com a Kinsta. A Kinsta cuida da manutenção e da performance, permitindo que você se concentre no crescimento do seu negócio e no aperfeiçoamento das suas personalizações.

Steve Bonisteel Kinsta

Steve Bonisteel é um Editor Técnico na Kinsta que começou sua carreira de escritor como jornalista impresso, cobrindo ambulâncias e caminhões de bombeiros. Ele tem coberto tecnologia relacionada à Internet desde o final dos anos 1990.