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.
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
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:
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.
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.
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.
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.
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.
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.
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.
50 reacties
Hoi Maikel, ik gebruik de Kadence Email Designer voor de opmaak van de emails en nu wil ik bij de bevestiging ook een pdf factuur meesturen. Ik gebruik hiervoor WooCommerce PDF invoices maar dit lijkt niet te werken?
Werkt hier prima in combinatie met de plugin. Je zal dus moeten debuggen waardoor het bij jou niet werkt.
Hallo Maikel,
In de e-mail bevestiging naar de klant toe zie ik nog zaken staan als shipping adress en billing adress. Alles lijkt vertaald (te zien in loco translate). Hoe kan ik dit aanpassen naar nl. ? Overigens in de bevestiging op het scherm staat de nederlandse vertaling (factuuradres en verzendadres
Dat is vreemd. Wellicht dat het thema dan ook nog invloed uitoefent?
ik heb het juist sinds ik kadenz gebruik, vandaar dat ik hoop(te) dat je wist waar ik moet zijn in kadenz. Ik gebruik overigens het hello thema, daar zit weinig in.
Ik heb helaas geen andere suggesties vanaf hier. Kadence pakt het bij mij altijd over hoe het in WooCommerce en de taal staat. De enige keren dat ik iets anders heb gezien is als er in het theme of child theme iets is aangepast aan de e-mailbestanden.
En hoe pas je dat aan? Want ik heb hetzelfde probleem!
Hoi!
Is er ook een makkelijke manier om een video toe te voegen aan deze mail?
Ik heb een video waarin wordt uitgelegd hoe ons bestelproces werkt.
Ik hoor graag van je,
Groetjes Dorien
Een link naar een video wel. Dit kun je simpel met HTML toevoegen. Echt een video in een mail zal niet lukken voor zover ik weet.
Hoe krijg je de BTW in het overzicht?
Dat staat er standaard al in bij in het totaal. Wil je het echt apart specificeren, dan zal je dit moeten aanpassen in de code van de e-mailbestanden.
Hoe kan ik automatisch een track en trace code toevoegen aan de mail die Woocommerce stuurt?
(Ik maak de PostNl labels ook al via WooCommerce)
Hoort volgens mij met de WooCommerce PostNL plugin te kunnen.
Hoi Maikel,
Kan ik ook het ontwerp van 1 specifieke e-mail exclusief aanpassen? 1 van de e-mails van Woocommerce komt bij ons direct uit de printer gerold. Het zou super zijn om het ontwerp (alleen voor deze e-mail) zo saai mogelijk te maken om geen dozen cartridges er doorheen te jagen.
Alvast bedankt voor je reactie.
Shel
Niet met deze plugin. Wel kun je natuurlijk altijd het templatebestand van de e-mail die je wilt wijzigen handmatig aanpassen.
Hi Maikel,
Wat een super fijne plugin!
Ik kan via de plugin alles aanpassen, echter past hij de body tekst niet aan. Ik kan wel een tekst invoeren, deze komt dus alleen niet in de preview te staan. Ook niet zodra ik de mail verstuur. Enig idee waar dit aan kan liggen? Alvast bedankt!
Het kan zijn dat je thema de e-mail templates van WooCommerce overschrijven, waardoor het ook deze plugin overschrijft.
Hi Maikel
Fijne tutorial, dank daarvoor!
Ik heb wel een vraag. Ik wil eigenlijk in de confirmation email de short description van het product meegeven. Heb jij enig idee hoe ik dat kan doen? Is daar nog een plugin voor? Probeer het hardcore in de templates te wijzigen echter heb ik het gouden ei hiervoor nog niet gevonden.
Je zou eens kunnen kijken of dit werkt: https://stackoverflow.com/questions/43564232/add-the-product-description-to-woocommerce-email-notifications
Hi,
Ik probeer al een tijdje de kleuren aan te passen van o.a. de container maar de pop-up met het kleurenschema komt niet meer in beeld waardoor ik niks meer kan aanpassen. Enig idee hoe ik dit kan oplossen?
Er zal vermoedelijk een conflict zijn. Meestal komt dit door een andere plugin of iets dergelijks. Je zou dit kunnen testen door andere plugins tijdelijk uit te zetten.
Ondanks dat het compatible moet zijn met mijn thema – het is geïnstalleerd- krijg ik de melding “er heeft zich een kritische fout voorgedaan op je website”. Ik kan op button herstellen klikken, maar er gebeurd niks.
Je zal in de mail moeten kijken om wat voor foutmelding het gaat. Hoeft niet zozeer aan het thema te liggen. De debug functie aanzetten om te kijken wat er precies fout gaat is ook een mogelijkheid.
Hoi Maikel,
Ik had graag het artikel nummer in de order email willen hebben. Heb jij enig idee of dit gaat en zo ja met welke placeholder?
Groetjes,
Seriana
Dit kan met een filter als:
// Adds SKUs to WooCommerce order emailsfunction webtalis_artikelnummer_wc_emails( $args ) {
$args['show_sku'] = true;
return $args;
}
add_filter( 'woocommerce_email_order_items_args', 'webtalis_artikelnummer_wc_emails' );
Hi Maikel!
Bedankt voor alle tips! Waar kan ik zo’n filter toevoegen? In de CUSTOM CSS van Email Designer? Ik wil namelijk ook een placeholder maken van een extra veld die bij mijn order staat in WooCommerce. Dit veld is de track en trace code die onze leverancier voor ons toevoegt via een plugin. Het veld heet: ‘vdl_shipping_tracking’.
Groeten Jade
In het functions.php-bestand kun je filters toevoegen. Custom CSS is alleen om het design aan te passen.
Goedenavond Maikel,
Bedankt voor het interessante filmpje.
Weet je toevallig of het mogelijk is om een logo of plaatje te plaatsen in de footer? Ik kan alleen maar social media icoontjes toevoegen.
Ja, dit is mogelijk. Bij de footer tekst kun je met HTML code een afbeelding toevoegen.
Bedankt voor de goede uitleg!
Weet jij ook hoe je het lettertype van de adressen kunt aanpassen? Dit is nu altijd cursief ook op de “thank you” page.
Hier is inderdaad healas geen optie voor. Je kunt het echter in de mail aanpassen met de custom css optie door onderstaande toe te voegen.
.address-td {font-style: normal;
}
Hi Maikel,
Waardevolle informatie! Is het ook mogelijk om per product een andere email te versturen? Dit heb ik echt nodig.. Bedankt!
Nee, niet met deze plugin. Om dit te bereiken kun je beter jouw webshop koppelen aan je e-mail marketing provider en vanuit daar per product een andere mail maken.
Hi Maikel, ik heb voor onze site ook deze plugin geinstalleerd en de templates aangepast. Bij een testbestelling zie ik echter dat er soms vreemde spaties tussen woorden staan, de tekst maar half leesbaar is, er html-code weergegevens worden en teksten ook compleet verschoven zijn. Alles behalve mooi. Weet je misschien hoe dit kan?
Ik heb dit nog nooit gehad of gezien op een website waar ik de plugin op heb staan. Wellicht dat iets anders een conflict geeft? Het thema waar je gebruik van maakt is van dezelfde maker. Ik zou een mailtje naar de support daar sturen, die kunnen je hier vermoedelijk goed mee helpen.
Walter, ik heb exact hetzelfde sinds de update. Ook zonder deze plugin trouwens. Ik ben er nog niet uit waar de fout zit.
Ik hoor graag als iemand hier een oplossing voor heeft gevonden! Ik heb namelijk hetzelfde probleem en heb me al suf gezocht op het internet zonder resultaat.
Ik ben bang dat het een vrij recent probleem is. 🤔
Klopt, ondertussen hoor ik er steeds meer mensen over en zijn er ook diverse topics over geopend op het WordPress forum. Deze is waarschijnlijk wel interessant om te bekijken. Hier staat een tijdelijke oplossing: https://wordpress.org/support/topic/woocommerce-emails-html-broken/
Wellicht dat er een verouderde e-mail template bestand in het thema zit. Bij WooCommerce -> Status kun je dit bekijken onder het kopje “Templates”.
Hoi Maikel,
Eerst wil ik je zeggen dat dit een leerzame site is.
Verder heb ik de volgende vraag:
Ik zag dat je een tekst had toegevoegd voor 10%korting bij een volgende bestelling.
Nu wil ik een nieuwe klant ook 1x korting geven op een volgende bestelling en dit melden via de manier zoals jij laat zien.
Maar als deze klant een nieuwe bestelling heeft geplaatst dan moet hij deze tekst niet weer in zijn mail krijgen als de bestelling is verzonden. Is dat mogelijk.
Het staat mij wel bij dat zoiets mogelijk is via Smart Coupons, dit is alleen wel een betaalde plugin en moet je even voor de zekerheid controleren.
Ik weet niet of je ook gebruik maakt van een mail provider? Dan zou je deze kunnen koppelen met WooCommerce en een automation kunnen instellen dat een nieuwe klant een mail met een kortingscode krijgt.
Bedank voor je reactie.
Ik ga eens kijken naar de mail provider.
In het gedeelte buttons aanpassen zie ik de boodschap staan: “Iemand heeft…….12:34 min. Dit gaat over het wachtwoord resetten. Is dat dezelfde boodschap als in Wislistmember wordt getoond, wanneer iemand zijn wachtwoord wil wijzgen?
Volgens mij hebben Wishlist Member en WooCommerce hier verschillende mails voor. Bij Wishlist member kun je de tekst aanpassen bij “Settings > Email Settings” (uit mijn hoofd).
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!
In de vertaling kun je dit aanpassen en anders vast ook met behulp van deze plugin, aangezien je de teksten vanuit hier ook kunt aanpassen.
Hier kan ik wat mee. Dank!
Goed om te horen. Succes ermee. 🙂
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?
Klopt, afhankelijk van het pakket dat je hebt kun je gebruikmaken van de officiele plugin van ActiveCampaign.
Zelf heb ik een lite pakket en hiermee kun je geen gebruikmaken van deep data. Ik gebruik daarom zelf de WooCommerce – ActiveCampaign plugin.