Categories: Tutorial

Editar CSS dos e-mails do WooCommerce

O que é CSS

Começando pelo começo

CSS ou Cascade Style Sheets é a tecnologia que nos permite estilizar páginas web. Ela foi criada para resolver um grande problema do HTML e anda lado-a-lado com esta linguagem de marcação. Antigamente, era necessário informar as cores, tamanhos e fontes dos elementos diretamente no código HTML. Acontece que se você quisesse alterar depois, um elemento que fosse, você teria de fazer esta alteração no site inteiro. Talvez não fosse um problema para estilizar o formulário de contato (por exemplo), mas imagine ter que trocar a cor de fundo do site. Você teria de fazer isso em todas as páginas já criadas. Com CSS, você só faz essa alteração 1 vez em 1 arquivo. O CSS é aplicado em cima de elementos HTML e várias camadas podem ser inseridas, sempre prevalecendo a que é lida por último.

CSS no WordPress

Como isso afeta sites WordPress

Quando você instala o WordPress, seu ambiente já vem com um tema instalado automaticamente. Dependendo da sua instalação, vem até com mais de um. Experimente instalar outro tema sem trocar nada no seu HTML e ative-o. Você perceberá que tem páginas bem diferentes apenas porque ativou outro tema. Isso se deve ao CSS. O WordPress utiliza vários arquivos de CSS, inclusive aquele que você cria ao configurar um tema filho (não sabe o que é? Clique aqui). Ele aplica o código de cada um baseado na especifidade de cada seletor e em caso de seletores duplicados, baseado na ordem de leitura dos arquivos, sendo o último lido, o que prevalece.

E-mails do WooCommerce

O que são emails do WooCommerce?

O WooCommerce envia e-mails automáticos para os clientes em determinados eventos baseado nas suas configurações, como por exemplo ao se registrar no site ou realizar uma compra. Estes e-mails até podem ter algumas opções trocadas nas configurações do WooCommerce, mas é bem limitado. Outra mazela é que se você criar um modelo de e-mail com código HTML personalizado, não teria um lugar central para realizar a troca de CSS e teria que fazer como antigamente, trocando o código inline de cada e-mail personalizado.

E-mails do WooCommerce

O que são emails do WooCommerce?

Adicionar CSS aos e-mails do WooCommerce

Vamos estilizar os emails do WooCommerce

Claro que tem um jeito mais fácil para você alterar o CSS tanto de seletores CSS originais do WooCommerce quanto àqueles que você mesmo criou.

Para conseguirmos tal feito, seguiremos estes passos:

Parece bem fácil, não é? Então mãos-à-obra!

Editando o arquivo functions.php do seu tema

Se você ainda não está utilizando um tema filho, não prossiga. Antes de você editar o functions.php do seu tema, você deve criar um tema filho. Saiba como.

Você já deve estar familiarizado com esta parte. Através do seu CPanel ou FTP Client, navegue até a pasta /wp-content/themes/seu-tema/seu-tema-filho/ e clique com o botão direito para editar o arquivo functions.php.

Colando o código no functions.php

Veja o código que vamos colar abaixo e siga lendo para entender como ele funciona e o que você deve editar:

/* style do email enviado*/
function pwp_adc_css_emails_woo() {
 ?>
  <style type="text/css">
   .body {background: #000;}
   .email-head {padding: 20px 10% 20px 10%;}
   a, .ii a[href] {color: #FF0000;}
  </style>
 <?php 
}
add_action('woocommerce_email_header', 'pwp_adc_css_emails_woo')

functions.php

O efeito final para o usuário será o mesmo nos dois casos. A diferença só é visível quando se está programando em um editor de textos colorido como o Notepad++. Na primeira opção, o código HTML ficará colorido (depende das configurações). Se você escolher a segunda forma, verá todo os texto CSS como um bloco de strings monocromático.

Inserindo o seu código CSS na função

Ok. Você já inseriu o gancho e a função no functions.php, agora você deve colar o seu código CSS no lugar do exemplo que eu lhe dei. Apague as linhas 6, 7 e 8 e insira o seu código CSS aí no meio. É só isso! Salve o seu functions.php na pasta do seu tema e acesse o site para verificar que está operacional. Se estiver tudo ok, experimente enviar um e-mail do WooCommerce para ver o novo estilo.

Conclusão

Vimos que o CSS dá estilo para uma página HTML e desde que seus e-mails sejam enviados neste formato (também poderia ser como somente texto), você pode alterar o design como quiser. O WooCommerce nos fornece um gancho para inserirmos texto direto no cabeçalho dos e-mails que acionamos através de do functions.php do nosso tema. Feito isso, é só colar o seu próprio CSS e prontinho! Seus e-mails terão uma nova cara.

Deixe seus comentários abaixo.

Rafa Carvalhido

Rafa é Programador Web especializado em WordPress + WooCommerce e escritor nos tempos livres. Criação de sites, otimizações de velocidade e SEO, e criação de plugins são algumas de suas funções rotineiras que lhe permitem falar com propriedade quando o assunto é WordPress.