Natuurlijk zijn WooCommerce bestelmails meestal routine-updates en misschien zelfs een beetje saai. Maar ze geven je bedrijf wél een directe lijn naar je klanten. En met elke e-mail bouw je vertrouwen op, versterk je je merk en creëer je een blijvende indruk waardoor klanten blijven terugkomen.
Helaas leveren de standaard WooCommerce e-mailtemplates niet de impact die de meeste bedrijven willen. Door het algemene ontwerp en de beperkte aanpassingsmogelijkheden voelen ze onpersoonlijk aan en geven ze de unieke identiteit van je merk niet weer. Zonder aanpassing mis je een kans om op een zinvolle manier contact te maken met je klanten.
Gelukkig kun je WooCommerce bestelmails aanpassen zodat ze opvallen. En er zijn meerdere manieren om dat te doen. Gebruik ingebouwde instellingen, vertrouw op plugins of schrijf je eigen code. Welke optie je ook kiest, je kunt e-mails ontwerpen die er professioneel uitzien en een betere algehele klantervaring opleveren.
Dit artikel laat zien hoe je je e-mails van basis naar uitzonderlijk kunt brengen. We behandelen op plugins gebaseerde oplossingen voor snelle resultaten en opties om met je custom code te werken voor volledige controle.
Laten we aan de slag gaan!
Standaard WooCommerce e-mailinstellingen die je moet weten
WooCommerce wordt geleverd met een set standaard e-mailtemplates die zijn ontworpen om de belangrijkste interacties met klanten af te handelen, zoals orderbevestigingen, verzendupdates en terugbetalingen. Deze templates gebruiken placeholders om dynamisch bestelgegevens zoals klantnamen, productinformatie en prijzen in te voegen. Hoewel deze ingebouwde e-mails de basis dekken en zonder meer de relevante informatie aan je klanten leveren, laten ze veel te wensen over op het gebied van ontwerp en branding.
De standaard WooCommerce e-mailtemplates hebben dan ook vooral een eenvoudig, functioneel ontwerp. Ze hebben eenvoudige layouts, minimale kleurenschema’s en een eenvoudige opmaak van de inhoud. Hoewel deze aanpak zorgt voor compatibiliteit met de meeste e-mailclients, beperkt het ook je mogelijkheden om een gedenkwaardige klantervaring te creëren. De e-mails weerspiegelen niet de unieke stijl van je merk en bieden niet veel flexibiliteit om persoonlijke accenten toe te voegen.
Deze beperkingen maken het moeilijk om op te vallen in de inbox van je klanten, vooral in concurrerende markten. Daarom is het aanpassen van WooCommerce e-mails zo belangrijk. Hiermee kun je je communicatie verbeteren en een sterkere band met je publiek creëren.
Laten we eens kijken hoe je deze templates kunt aanpassen met behulp van het ingebouwde instellingenpaneel van WooCommerce.
Hoe je WooCommerce bestelmails kunt aanpassen met het instellingenpaneel
WooCommerce biedt ingebouwde aanpassingsopties waarmee je snel aanpassingen kunt maken aan je bestelmails zonder dat je daar plugins of custom code voor nodig hebt. Deze instellingen zijn toegankelijk via je WordPress dashboard en richten zich op merkelementen zoals je logo, kleuren en basistekst. Hoewel deze opties een goed uitgangspunt zijn, hebben ze beperkingen waardoor je misschien meer wilt.
Toegang tot het instellingenpaneel
Om te beginnen ga je naar WooCommerce > Settings > Emails in je WordPress dashboard. Hier zie je een lijst met e-mailtypes zoals New order, Cancelled order en Completed order. Dit zijn allemaal verschillende e-mails die WooCommerce naar jou of je klanten stuurt, afhankelijk van de situatie.
Klik op de knop Manage bij elk e-mailtype om specifieke details aan te passen, maar voor het algemene e-mailontwerp scroll je naar beneden voorbij deze e-mails om bij de template-opties te komen.
Beschikbare aanpassingsopties
Zodra je naar het kopje Email template scrollt, kun je enkele wijzigingen aanbrengen in hoe de standaard e-mailtemplate eruitziet.
Hier kun je attributen aanpassen zoals de primaire kleur, achtergrondkleur en tekstkleur van de e-mail. Deze kleine veranderingen kunnen ervoor zorgen dat je e-mails passen bij het kleurenschema van je merk. Dat wil zeggen, de e-mails zullen in ieder geval overeenkomen met je website.
Je kunt ook de headerafbeelding en de footer aanpassen, waar je bijvoorbeeld een slogan, bedrijfsnaam of contactgegevens kunt opnemen. Deze kleine veranderingen kunnen ervoor zorgen dat je e-mails professioneler en persoonlijker aanvoelen.
Beperkingen van de ingebouwde instellingen
Hoewel deze tools basic branding mogelijk maken, geven ze je niet de volledige creatieve controle. Bijvoorbeeld:
- De layout van de e-mails blijft vast, dus je kunt geen elementen herschikken of nieuwe secties toevoegen.
- Lettertypen kunnen niet worden aangepast buiten de standaard stijlen die je website gebruikt.
- Je kunt geen dynamische elementen toevoegen zoals productaanbevelingen of upsell-links.
Deze beperkingen maken het instellingenpaneel een goede keuze voor kleine aanpassingen, maar minder ideaal voor bedrijven die een zeer merkgerichte ervaring willen leveren. En vergeet het als interactiviteit je doel is.
Plugins of extensies gebruiken voor geavanceerde aanpassingen aan WooCommerce bestelmails
Als de ingebouwde WooCommerce instellingen niet de flexibiliteit bieden die je nodig hebt, dan kunnen plugins of WooCommerce extensies je helpen om prachtig aangepaste bestelmails te maken met geavanceerde functies. Als je deze route neemt, kun je verder gaan dan de basic branding om aangepaste layouts te maken en dynamische elementen op te nemen, zoals upsell-links en productaanbevelingen.
Plugins brengen ook uitdagingen met zich mee. Sommige plugins kunnen conflicten veroorzaken met andere WooCommerce extensies, plugins of thema’s, waardoor functionaliteitsproblemen ontstaan.
Updates van WooCommerce of WordPress kunnen soms ook de functionaliteit van plugins verstoren. Bovendien, als er iets mis gaat, kan het opsporen van problemen met plugins tijdrovend zijn, vooral als je niet bekend bent met dit soort probleemoplossing.
Hier zijn drie populaire plugins en extensies voor het aanpassen van WooCommerce bestelmails, samen met hun belangrijkste features:
1. Email Customizer for WooCommerce
De Email Customizer for WooCommerce extensie voegt een drag-and-drop editor voor het aanpassen van e-maillayouts toe aan WooCommerce. Je kunt elementen als logo’s, tekst, afbeeldingen en knoppen toevoegen, waardoor je volledige controle hebt over het ontwerp van je e-mail.
Belangrijke functies zijn onder andere vooraf ontworpen templates, opties om aangepaste inhoud op te nemen zoals upsell-aanbiedingen of persoonlijke berichten, en realtime previews zodat je wijzigingen kunt zien terwijl je ze aanbrengt.
2. Kadence WooCommerce Email Designer
De Kadence WooCommerce Email Designer plugin biedt een eenvoudige manier om mooiere e-mails te ontwerpen. Het werkt goed met WooCommerce en laat je lettertypes, kleuren en layouts bewerken.
Enkele opvallende functies zijn live e-mailpreviews om je wijzigingen te controleren, super eenvoudige aanpassing van header, footer en body content, en ondersteuning voor het importeren of exporteren van ontwerpen voor hergebruik op verschillende sites
3. YITH WooCommerce Email Templates
De YITH WooCommerce Email Templates plugin richt zich op het leveren van een bibliotheek met professioneel ontworpen emailtemplates. Het is ideaal als je een gepolijste look wilt zonder uren te besteden aan het ontwerp. Je kunt kiezen uit verschillende templatestijlen, social media iconen, branding en dynamische inhoud toevoegen en het werkt goed naast andere WooCommerce extensies
Hoe je WooCommerce bestelmails kunt aanpassen met een plugin
Voor deze tutorial gebruiken we de Kadence WooCommerce Email Designer plugin als voorbeeld. Hier lees je hoe je de plugin installeert en gebruikt om je e-mails aan te passen:
Installeer en activeer de plugin
Ga naar je WordPress dashboard en navigeer naar Plugins > Add new. Zoek naar Email Customizer for WooCommerce, klik op Install now en activeer de plugin.
E-mailtemplates aanpassen
Ga naar WooCommerce > E-mail Customizer in je dashboard. Gebruik de editor om de layout van je e-mail aan te passen. Je kunt merkelementen toevoegen zoals je logo, kleuren aanpassen aan je merk en persoonlijke tekst toevoegen. Je kunt ook kiezen uit een kant-en-klaar template.
Dynamische elementen toevoegen
Voeg upsell-links toe om herhaalaankopen aan te moedigen. Je kunt bijvoorbeeld een knop toevoegen die gerelateerde producten promoot.
Op dit punt kun je ook sociaal bewijs toevoegen, zoals klantbeoordelingen of vertrouwensbadges, om geloofwaardigheid op te bouwen.
Je e-mails opslaan en testen
Sla je aangepaste e-mailontwerp op en gebruik de ingebouwde voorbeeldtool om te controleren hoe het eruit ziet. Test de e-mails door ze naar jezelf te sturen om er zeker van te zijn dat alles correct wordt weergegeven. Doe dit door te klikken op Send Preview Email onderaan de customizer.
Plugins bieden een krachtige manier om je bestelmails te verbeteren, maar als je vaak compatibiliteitsproblemen tegenkomt, biedt custom code misschien een betrouwbaardere oplossing voor de lange termijn.
Hierna gaan we kijken hoe je WooCommerce e-mails kunt aanpassen met behulp van custom code voor maximale controle.
Hoe je WooCommerce bestelmails kunt aanpassen met custom code
Als je volledige controle nodig hebt over je WooCommerce bestelmails, dan is aangepaste code de beste oplossing. In tegenstelling tot plugins, die afhankelijk zijn van kant-en-klare functies (waardoor je je nog steeds een beetje beperkt kunt voelen), geeft codering je de vrijheid om e-mails te ontwerpen die perfect bij je merk passen en functies bevatten die specifiek zijn voor jouw bedrijf. Het is ook een meer schaalbare oplossing omdat je niet gebonden bent aan software van derden die na verloop van tijd incompatibel of verouderd kan raken.
Je zult moeten werken met de ingebouwde hooks en templates van WooCommerce om je eigen e-mails te maken. Zo kun je elk aspect van je e-mails aanpassen, van de header en footer tot dynamische, gegevensgestuurde elementen zoals gepersonaliseerde productaanbevelingen. En het eindresultaat?
Een volledig op maat gemaakte e-mailervaring die je merk weerspiegelt en je klanten betrokken houdt. Laten we beginnen met een basisvoorbeeld.
Basisvoorbeeld van een op code gebaseerde WooCommerce bestelmail
WooCommerce biedt verschillende hooks en filters die je kunt gebruiken om de inhoud van je e-mail aan te passen. Je kunt bijvoorbeeld inhaken op de filters woocommerce_email_headers en woocommerce_email_footer om e-mailheaders, footers of iets anders aan te passen.
Hier is een snel voorbeeld van het toevoegen van een aangepaste footer aan je bestelmails:
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;
}Je kunt dit fragment toevoegen aan het bestand functions.php van je childthema.
Ontwerp verbeteren met HTML en CSS voor nauwkeuriger e-mailontwerp
Als je wilt dat je e-mails er gepolijst en visueel aantrekkelijk uitzien, is het bewerken van de e-mailtemplates van WooCommerce met HTML en CSS een geweldige optie. WooCommerce slaat zijn e-mailtemplates op in de woocommerce/email map van je thema. Als je deze templates aanpast, kun je de layout, typografie en het ontwerp verfijnen om e-mails te maken die passen bij je winkel.
Om bijvoorbeeld een aangepaste header toe te voegen aan de e-mail “Order completed”, kun je het bestand customer-completed-order.php in de map woocommerce/emails bewerken.
Zo doe je dat:
Kopieer eerst het customer-completed-order.php bestand naar de woocommerce/emails map van je thema. Dit zorgt ervoor dat je wijzigingen niet worden overschreven tijdens updates van WooCommerce.
Voeg vervolgens je nieuwe header-inhoud toe aan de bovenkant van het bestand.
Je kunt bijvoorbeeld iets als dit toevoegen:
<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>Dit codefragment voegt je logo toe aan de bovenkant in het midden van de e-mail en voegt een gele achtergrondkleur toe aan het headergebied:
E-mailclients verwijderen vaak externe stijlen, dus het is belangrijk om inline CSS te gebruiken voor compatibiliteit. Dit zorgt ervoor dat je ontwerp er consistent uitziet op alle apparaten en e-mailplatforms.
Door je e-mails te verfraaien met HTML en CSS heb je precieze controle over het uiterlijk. Zorg er wel voor dat je ontwerpen mobielvriendelijk blijven door waar nodig responsieve elementen te gebruiken, zoals procentuele breedtes en media queries.
Dynamische elementen toevoegen aan WooCommerce bestelmails
Dynamische elementen kunnen je WooCommerce bestelmails nog aantrekkelijker maken. Hierdoor worden ze persoonlijker en hebben ze in sommige gevallen interactieve functies. Met de hooks en filters van WooCommerce is het eenvoudig om deze elementen direct in je e-mailtemplates op te nemen en mogelijkheden te creëren om de betrokkenheid te vergroten.
Voorbeeld: Persoonlijke productaanbevelingen toevoegen
Je kunt WooCommerce hooks gebruiken om gerelateerde of upsell productaanbevelingen op te nemen die specifiek zijn voor de bestelling van elke klant. Je kunt bijvoorbeeld aanvullende producten weergeven op basis van artikelen in hun winkelwagen.
Om te beginnen voeg je de dynamische inhoud toe met behulp van een hook, zoals de volgende:
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>';
}
}
}
}
}Dit fragment haakt in op de actie woocommerce_email_after_order_table om gerelateerde producten weer te geven onder de bestelgegevens in de e-mail “Order completed” van de klant.
Voorbeeld: Een dynamische link voor een beoordelingsverzoek toevoegen
Moedig klanten aan om een beoordeling achter te laten door een gepersonaliseerde link in de e-mail op te nemen. Bijvoorbeeld:
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>';
}Dit fragment voegt een eenvoudige call-to-action toe in de footer van de e-mail en nodigt klanten uit om hun mening te delen.
Voorbeeld: Knoppen voor sociale media invoegen
Je kunt ook knoppen voor sociale media opnemen om in contact te komen met klanten buiten e-mail. Voeg de volgende code toe om klikbare pictogrammmen weer te geven in de footer van je 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>';
}Je aanpassingen testen
Na het aanpassen van je WooCommerce bestelmails, zorg je er door te testen voor dat alles correct en zoals bedoeld wordt weergegeven op meerdere apparaten. Een grondig testproces helpt je opmaakfouten, dode links of ontbrekende elementen op te sporen voordat je klanten ze zien.
Hier zijn een paar hulpmiddelen die van pas kunnen komen:
- WP Mail Logging: WP Mail Logging is een populaire plugin die alle uitgaande e-mails van je WordPress site bijhoudt. Gebruik het om te controleren of je aangepaste e-mails correct worden verzonden en om de inhoud ervan te bekijken.
- WooCommerce Preview Emails: Met deze plugin kun je een voorbeeld van WooCommerce e-mails direct in je WordPress dashboard bekijken. Het is een snelle manier om je aanpassingen te controleren zonder echte bestellingen te plaatsen.
- Testprogramma’s voor e-mailclients: Met platforms als Litmus of Email on Acid kun je e-mails bekijken in verschillende clients (zoals Gmail en Outlook) en apparaten.
Je kunt ook een voorbeeld van je e-mails bekijken in je dashboard. Gebruik de Preview Emails for WooCommerce plugin om de layout, kleuren en inhoud van je aangepaste templates te controleren. Zorg ervoor dat alle elementen zoals logo’s, tekst en dynamische inhoud verschijnen zoals bedoeld.
Stuur vervolgens testmails naar jezelf of naar een testaccount om te zien hoe ze eruit zien in een echte inbox. Controleer op problemen zoals doodlopende links, ontbrekende afbeeldingen of opmaakfouten.
Best practices voor het effectief aanpassen van WooCommerce e-mails
Het aanpassen van WooCommerce bestelmails verhoogt je klantervaring. Althans, dat kan. Het volgen van best practices helpt je dichter bij dat doel te komen door e-mailontwerpen te maken die effectief, toegankelijk en compatibel blijven op verschillende platforms.
Hier zijn vier stappen om ervoor te zorgen dat alle e-mailaanpassingen die je maakt voldoen aan de huidige best practices:
1. Houd ontwerpen mobielvriendelijk en gemakkelijk leesbaar
Meer dan de helft van alle e-mails wordt geopend op mobiele apparaten, dus een responsief ontwerp is onmisbaar. Gebruik inline CSS om layouts aan te passen en zorg ervoor dat lettertypen, knoppen en afbeeldingen de juiste schaal hebben. Vermijd rommel door vast te houden aan eenvoudige, strakke ontwerpen waarin leesbaarheid voorop staat.
2. Test op compatibiliteit met e-mailclients
Verschillende e-mailclients, zoals Gmail en Outlook, geven HTML e-mails op verschillende manieren weer. Test je e-mails op verschillende platforms en apparaten om inconsistenties in opmaak, kleuren of reactiesnelheid op te sporen.
3. Voeg een duidelijke call-to-action toe
Elke e-mail over bestellingen moet een doel hebben dat verder gaat dan het bevestigen van de aankoop. Gebruik CTA’s om acties aan te moedigen zoals het achterlaten van een recensie, het bekijken van gerelateerde producten of het aanmelden voor je nieuwsbrief. Maak je CTA’s prominent en gemakkelijk aan te klikken, zelfs op mobiel.
4. Gebruik duidelijke taal en vermijd overmatige opmaak
Schrijf je e-mails op een conversatietoon die gemakkelijk te begrijpen is. E-mails overladen met afbeeldingen, vette lettertypen of complexe layouts kan afleiden van je boodschap en laadtijden vertragen.
Veelvoorkomende fouten en tips om problemen op te lossen
Zelfs met zorgvuldige planning kunnen aanpassingen aan WooCommerce bestelmails soms fout gaan. Of het nu gaat om e-mails die niet worden verzonden, layouts die kapot gaan of dynamische inhoud die niet wordt bijgewerkt, weten hoe je veelvoorkomende problemen oplost bespaart je tijd en frustratie.
Hier zijn de top drie problemen en hoe je ze kunt oplossen:
1. E-mails verzenden niet na aanpassingen
Als je e-mails niet meer worden verzonden nadat je wijzigingen hebt aangebracht, heeft het probleem waarschijnlijk te maken met je e-mailserver of -configuratie. Je kunt het oplossen door:
- De instellingen van je e-mailserver te controleren: Zorg ervoor dat je hostingomgeving transactionele e-mails ondersteunt. Beheerde hostingproviders zoals Kinsta bieden geoptimaliseerde e-mailaflevering voor WooCommerce.
- SMTP-configuratie controleren: Gebruik een plugin zoals WP Mail SMTP om een betrouwbare SMTP-server in te stellen voor het verzenden van e-mails. Test de verbinding om te bevestigen dat e-mails correct worden verzonden.
2. Themaconflicten of niet-werkende layouts
Soms kunnen aanpassingen ervoor zorgen dat je WordPress thema conflicteert met de e-maillayout en dingen kapot maakt. Om dit op te lossen:
- Wis de templatecache van WooCommerce: Ga naar WooCommerce > Status > Tools en klik op Clear template cache. Dit dwingt WooCommerce om je bijgewerkte templates te laden.
- Debug problemen met code: Controleer je aangepaste code op fouten. Gebruik PHP debugging tools of raadpleeg de developer console van je browser om problemen op te sporen.
- Controleer thema overschrijvingen: Als je thema WooCommerce e-mailtemplates overschrijft, controleer dan of die templates up-to-date en compatibel zijn met jouw versie van WooCommerce.
3. Inhoud wordt niet bijgewerkt in e-mails
Als je wijzigingen in de e-mailinhoud niet worden weergegeven, kan het probleem te maken hebben met overschreven templates of onjuiste plaatsing van code. Om dit te debuggen:
- Controleer overridden e-mailtemplates in je thema: Ga naar de map
woocommerce/emailsvan je thema en controleer of de templates overeenkomen met je wijzigingen. Kopieer indien nodig nieuwe templates uit de WooCommerce plugin map en pas je aanpassingen opnieuw toe. - Zorg ervoor dat snippets in het juiste bestand staan: Voeg PHP-snippets toe aan het
functions.phpbestand van je kindthema of aan een aangepaste plugin om compatibiliteit te garanderen tijdens thema-updates.
Samenvatting
Het aanpassen van WooCommerce bestelmails is een van de eenvoudigste manieren om je branding te versterken en de klantervaring te verbeteren. Het aanpassen van deze e-mails aan je eigen stijl is nog een manier om vertrouwen op te bouwen en klanten aan te moedigen om na verloop van tijd opnieuw zaken te doen.
In dit artikel zijn verschillende methoden onderzocht om je WooCommerce bestelmails aan te passen. Of je nu plugin-gebaseerde oplossingen kiest voor gebruiksgemak of in aangepaste code duikt voor volledige controle, beide benaderingen kunnen je helpen verbluffende resultaten te bereiken.
Laat standaardtemplates je mogelijkheden niet beperken. Neem de tijd om je e-mails te optimaliseren en kijk hoe dat de klanttevredenheid en klantenbinding beïnvloedt. En als het beheren van je WordPress site overweldigend aanvoelt, overweeg dan managed hosting met Kinsta. Kinsta zorgt voor onderhoud en prestatieoptimalisatie zodat jij je kunt richten op het laten groeien van je bedrijf en het perfectioneren van je aanpassingen.
Steve Bonisteel is Technical Editor bij Kinsta. Hij begon zijn schrijverscarrière als verslaggever en achtervolgde ambulances en brandweerwagens. Sinds eind jaren negentig schrijft hij over internetgerelateerde technologie.
