WooCommerce e-mail template aanpassen

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

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.

50 reacties

  1. 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?

  2. 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

      1. 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.

        1. 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.

  3. 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

  4. 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)

  5. 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

  6. 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!

  7. 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.

  8. 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?

  9. 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.

  10. 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

    1. Dit kan met een filter als:

      // Adds SKUs to WooCommerce order emails
      function webtalis_artikelnummer_wc_emails( $args ) {
      $args['show_sku'] = true;
      return $args;
      }
      add_filter( 'woocommerce_email_order_items_args', 'webtalis_artikelnummer_wc_emails' );

      1. 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

  11. 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.

  12. 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.

  13. 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?

    1. 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.

    2. Walter, ik heb exact hetzelfde sinds de update. Ook zonder deze plugin trouwens. Ik ben er nog niet uit waar de fout zit.

      1. 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. 🤔

  14. 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.

    1. 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.

  15. 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?

  16. 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!

  17. 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

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *