WooCommerce e-mail template aanpassen

Ik was voor de Webtalis Academy op zoek naar een manier om de e-mail template van WooCommerce aan te passen.

Nu wist ik al dat je bij de e-mailinstellingen van WooCommerce het een en ander kunt aanpassen en een e-mail template kunt overschrijven naar je thema.

Ik kon mij alleen niet voorstellen dat er niet een eenvoudigere manier is om het aan te passen. Gelukkig is deze er wel en in dit artikel laat ik je zien hoe je de WooCommerce e-mails volledig naar smaak kunt designen.

E-mails zijn bij webshops vaak het ondergeschoven kindje. De betaling is tenslotte toch al verricht en het geld is binnen. E-mails zijn echter een goede manier om je webshop te onderscheiden van de rest. Zo kun je bruikbare informatie toevoegen en je merk beter opbouwen.

Denk bijvoorbeeld aan een link naar je FAQ (veelgestelde vragen), een telefoonnummer of zelfs een kortingscode die gebruikt kan worden bij een volgende aankoop.

Er is in elk geval genoeg te verzinnen wat je in de WooCommerce e-mails naar klanten kunt verwerken. Laten we kijken hoe we dit kunnen implementeren.

Video: WooCommerce e-mails aanpassen

In de video hieronder kun je over mijn schouder meekijken hoe je de e-mails van WooCommerce kunt aanpassen voor jouw webshop.

Abonneer je op mijn YouTube kanaal

Wil je de uitleg uit bovenstaande video liever in tekstvorm lezen? Hieronder kun je op je gemak verder lezen om te leren hoe je een WooCommerce e-mail template kunt aanpassen.

WooCommerce e-mail template plugin

Kadence WooCommerce Email Designer

De eenvoudigste manier om je e-mails naar wens aan te passen, is door gebruik te maken van de plugin Kadence WooCommerce Email Designer.

Het mooie aan deze plugin is dat je niet de code hoeft in te duiken en direct alles vanuit de WordPress customizer kunt aanpassen. Je ziet de aanpassingen zelfs live direct gebeuren, waardoor je meteen een goed beeld hebt bij wat je aan het doen bent.

Wanneer je de plugin hebt geinstalleerd en geactiveerd op je webshop, kun je naar “WooCommerce -> Email Customizer” om aanpassingen te doen.

De standaard e-mails van alle WooCommerce webshops zien er als volgt uit. Vanaf hier gaan we aanpassingen maken:

Standaard e-mail design van WooCommerce

E-mail template van WooCommerce aanpassen

De eerste optie die direct bovenaan staat in de customizer, is de optie “Prebuild Templates”. Je kunt hier direct een keuze maken uit een aantal e-mail templates die je e-mails er een stuk professioneler uit laten zien.

WooCommerce e-mail template veranderen

Mocht je nog niet helemaal tevreden zijn met een template dat je hebt gekozen, dan hoef je je geen zorgen te maken. Je kunt echt nog van alles aanpassen aan het design en dit als beginpunt gebruiken.

Zo heb je bij de optie “Container” de mogelijkheid om de breedte aan te passen, kun je een border (rand) toevoegen, gebruikmaken van schaduweffecten en nog een aantal andere dingen.

Bij de optie “Content” kun je de stijl van kopteksten, tekst, bestelde artikelen, adressen en knoppen ook nog helemaal naar wens instellen.

Design van WooCommerce e-mails verder aanpassen

Aangepaste CSS toevoegen

Kun je iets van het design niet aanpassen zoals je het precies wilt hebben? Je kunt dit altijd nog zelf bereiken door dit aan te passen met behulp van CSS.

Je kunt CSS toevoegen door op de optie “Custom Styles” te klikken. Je krijgt dan een box te zien waarin jij jouw CSS in kwijt kunt.

E-mail design met custom CSS.

WooCommerce e-mail tekst aanpassen

Naast het uiterlijk, die we zo dadelijk nog wat verder gaan aanpassen en personaliseren, is de tekst in de mails natuurlijk ook heel belangrijk.

Met deze plugin heb je bij “Email type and Text” de mogelijkheid om de teksten aan te passen zonder dat je de standaard e-mail templates hoeft te overschrijven of in de vertaling van WooCommerce moet prutsen.

WooCommerce e-mail tekst aanpassen

Bij “Email type” kun je aangeven de soort e-mail aangeven waarvan je de tekst wilt aanpassen. Je kunt dus echt alle e-mails die WooCommerce stuurt aanpassen.

Afhankelijk van de soort e-mail krijg je diverse velden om aan te passen. Zo kun je bijvoorbeeld bij de mail “Bestelling afgerond en/of verzonden” bij de body tekst informatie toevoegen als een telefoonnummer, een indicatie hoelang het verzenden meestal duurt (als je geen track & trace hebt) en dat soort dingen.

Er zijn diverse placeholders die je kunt gebruiken om de e-mail te personaliseren. Je kunt deze in de customizer terugvinden. Zo kun je bijvoorbeeld de volledige naam van een klant {customer_full_name} toevoegen.

Logo toevoegen aan e-mail

Natuurlijk wil je ook het logo van je webshop in de e-mail verwerken. Om deze aan de bovenkant van de e-mail toe te voegen, kun je naar “Header -> Header image” gaan in de customizer.

Je kunt hier het logo van je webshop toevoegen, de grootte bepalen en uitlijnen. Verder kun je ook aangeven hoeveel ruimte (padding) om het logo heen moet staan en de achtergrondkleur bepalen.

Logo toevoegen aan WooCommerce e-mails

Footer WooCommerce e-mails aanpassen

Tot slot kun je ook nog aanpassingen aan de footer van je e-mails doen. Zo kun je bij “Footer -> Footer Social” links toevoegen naar je social media profielen of bij “Footer -> Credit Content” eventueel nog andere tekst toevoegen aan de footer.

Alles naar wens ingesteld? Test het uit

Wanneer je e-mails volledig naar wens zijn opgemaakt, dan is het handig om een test te doen om te controleren of het er ook echt goed uitziet in de mail.

Bij de optie “Send Preview Email” krijg je de mogelijkheid om een mailadres in te voeren en een e-mail naar jezelf te sturen.

Nieuw WooCommerce e-mail design testen

Hoewel bovenstaande optie een goede keuze is, kan ik je alleen maar aanbevelen om ook een testbestelling op je webshop te doen. Dit is de enige manier om er 100% zeker van te zijn dat de e-mails perfect zijn.

Conclusie

De standaard WooCommerce e-mailinstellingen zijn niet krachtig genoeg om grote wijzigingen door te voeren zonder zelf de code in te duiken. Hopelijk zal dit in de toekomst veranderen. Voor nu is de Kadence WooCommerce Email Designer plugin een uitstekende optie om je e-mails aan te passen.

Binnen no-time kun je al je e-mails volledig naar wens hebben opgemaakt, waardoor het een professionelere look krijgt dan de standaard WooCommerce e-mails.

6 reacties Voeg ook een reactie toe

  1. Hi! Enig idee hoe ik het bestelnummer weg krijg uit de e-mail? Van mij hoeft dat namelijk niet getoond te worden in de e-mailbevestiging naar de klant. Alvast bedankt!

  2. Tof. Thanks. Vraagje: als ik een automation wil straten vanuit ActiveCampaign (inclusief tag toevoegen) na een aankoop. Dan heb ik zeker een speciale Plugin daarvoor nodig?

Geef een reactie