Op 11 februari 2015 is versie 2.3.0 van WooCommerce uitgebracht en zijn hier een aantal verbetering doorgevoerd in de e-mail templates van WooCommerce. Ik hou de verbeteringen die WooCommerce op dit gebied maakt in de gaten omdat ik graag de e-mail templates van WooCommerce wil gebruiken maar dat momenteel niet doe omdat deze er op mobiel nog niet goed uitzien. Zie hiervoor mijn GitHub ticket E-mail WooCommerce not looking good on mobile.
Nieuw design WooCommerce e-mailtemplates
Feature – Fresh new frontend / email design.
De eerste feature die wordt genoemd in de changelog is een nieuw design. Dit is het verschil voor en na de update:
Zoals je ziet maken ze meer gebruik wat witruimte, wat een goed is uiteraard, maar verder is er eigenlijk maar weinig veranderd.
Inline CSS via Emogrifier
Refactor – Replaced existing email css inliner with Emogrifier.
Het is helaas nog niet mogelijk voor HTML e-mail templates gebruik te maken van aparte CSS stylesheets, de CSS moet inline in de HTML opgenomen worden. In de e-mail templates email-header.php en email-footer.php versie 2.0.0 van WooCommerce werd dit op deze wijze gedaan:
Je ziet dat alle CSS in het templatebestand opgenomen is en dat dit vervolgens als inline style in de HTML wordt opgenomen: style="<? php echo $wrapper; ?>". Vanaf versie 2.3.0 wordt er in de HTML gewoon gebruik gemaakt van id="" en is de CSS in een aparte e-mail template te vinden: email-styles.php. Net als alle andere e-mail templates kun je deze styles eenvoudig overschrijven door zelf dit bestand op te nemen in je eigen WordPress theme óf door gebruik te maken van een filter. Dit wordt goed uitgelegd in het artikel WC 2.3 Email Class Refactor and Enhancements.
Het gebruik van een apart bestand voor de CSS stijlen en het gebruik van id="" lijkt sterk op het gebruik van een aparte CSS stylesheet. Voor de oplettende lezer die zich afvraagt of inline styles dus nu niet meer nodig zijn en dit tot verleden tijd behoort, nee! De CSS uit het bestand email-styles.php wordt nog steeds als inline style toegevoegd aan de HTML van de e-mails. Dit heeft WooCommerce nu echter geautomatiseerd door gebruik te maken van een CSS Inliner, te weten Emogrifier.
WooCommerce e-mailtemplate aanpassen
Zowel in de huidige als vorige versies van WooCommerce kun je via de WooCommerce instellingen, tabblad ‘E-mail’ maar heel beperkt de layout (zoals eerder getoont in deze post) van de WooCommerce e-mails aanpassen. Op onderstaande e-mail zie je dat er maar vier CSS variabelen zijn aan te passen:
Alle andere CSS die het uiterlijk van de e-mailtemplate van WooCommerce bepaalt (en dus niet aan te passen is via de WooCommerce instellingen in WordPress) vind je in WooCommerce versie 2.3.0 dus in het bestand email-styles.php. Door deze e-mail template van WooCommerce te overschrijven heb je inmiddels de complete regie over de CSS voor de WooCommerce e-mails, de grote verbetering van deze update!
De webdevelopers die zelf al voor versie 2.3.0 van WooCommerce aan de slag zijn gegaan met het aanpassen van de CSS voor de WooCommerce e-mails weten dat dit niet erg eenvoudig was. Het probleem was dat WooCommerce voor versie 2.3.0 aan de HTML elementen
,
,
aen
Zoals gezegd is er uiteindelijk een filter beschikbaar gesteld om die inline styles te kunnen verwijderen of aan te passen, maar dit is voor een normale eindgebruiker van WordPress niet te doen, kijk maar eens via deze link welke code ik allemaal in mijn functions.php moest plaatsen om die inline styles te wijzigen.
Zijn jullie daarom ook niet blij dat je nu gewoon de WooCommerce CSS kunt aanpassen door een eigen versie van email-templates.php in je WordPress child theme te plaatsen?
Aanpassen WooCommerce e-mail templates nog steeds te moeilijk
Zoals je uit voorgaande wel hebt begrepen, is het aanpassen van de WooCommerce e-mail templates voor een developer een stuk makkelijker geworden. Door het aanpassen van de template bestanden kunnen we ook tekst toevoegen, verwijderen en andere aanpassingen door door het gebruik van PHP. Maar voor de gemiddelde WooCommerce gebruiker is dit natuurlijk veel te lastig. Terecht is dit als eens opgemerkt in het ideeën logboek van WooCommerce: WooCommerce Extension: Customize Emails. Ik quote:
It’s currently WAY too difficult to customize WooCommerce system emails. You should produce an extension that allows people more design flexibility and to customize the text easily. This is more than just a convenience- it’s a branding and customer relations necessity.
Op 12-09-2014 heb ik een e-mail ontvangen dat de status is aangepast naar ‘Started’, wat betekent dat we wellicht een keer mogen verwachten dat er een extensie voor WooCommerce beschikbaar komt die het aanpassen van de e-mails makkelijker maakt. Ik houd het in de gaten!
Beste Willem,
Dankjewel voor je mooie uitgebreide blog-artikel met goede uitleg!
Ik maak gebruik van de Woocommerce Smart Coupons plugin. Deze heeft zijn eigen email.php template, maar maakt voor zijn opmaak gebruik van de standaard stijlen voor alle Woocommerce emails in email-styles.php en ook de standaard templates voor de header en de footer.
Heb jij enig idee hoe je de Smart coupons e-mail van zijn eigen opmaak kan voorzien zonder dat je alle standaard mails van Woocommerce aanpast?
Ik kan eventueel in de email-styles.php een if-statement plaatsen en checken of het gaat om een Smart Coupons e-mail en dan vervolgens de desbetreffende class of id overrulen, maar vind ik niet zo chique.
Alvast bedankt voor je antwoord.
Rob
Een probleem na de update in de emails, er blijft deze tekst verschijnen:
Thank you so much for your order. Please make your payment directly into our bank account and use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.
Ik kan dit nergens meer terug vinden in de email templates, ook de payment instructies die wel in de emails staan die naar de klant gestuurd wordt kan ik nergens terug vinden.
Heb jij een idee waar ik moet gaan zoeken? Hoef geen kant en klare oplossing maar ik weet niet meer waar te zoeken. Heb in de templates/email alles gehad.
Hoi, die tekst staat inderdaad niet in de e-mail templates maar komt uit je instellingen van WooCommerce. Ga daar naar het tabblad ‘Afrekenen’ en check de tekst bij ‘Directe bankoverschrijving’.
zelf heb ik ineens het probleem dat de header en footer dubbel zijn in de mail. Het is dus een template in een template. Iemand enig idee he dit is op te lossen?
Wat is ineens? Heb je recentelijk een verandering gedaan aan de website waarna het is opgetreden?
ik weet eigenlijk niet sinds wanneer het is opgetreden, dat maakt het zo lastig. Maar de mail template wordt nu twee keer geladen. De content staat er wel gewoon 1 keer in.
Als je niet precies weet wat de veroorzaker is van het probleem kun je het beste even switchen (op een testomgeving) naar een standaard WordPress thema en dan even een testorder doen. Als het probleem zich niet meer voordoet zal het liggen aan het thema dat waarschijnlijk eigen WooCommerce emailtemplates heeft waar een fout in zit. Als dat niet helpt kun je nog je plugins gaan deactiveren, behalve WooCommerce zelf, en opnieuw testen.
hoe kan ik tussenvoegsel toevoegen in email?
Ik heb het gedaan bij checkout met add_filter( ‘woocommerce_checkout_fields’ , ‘custom_my_function’ ); maar het toont niet in mail bij Factuuradres naast voornaam en achternaan.
Persoonlijk zou ik de makkelijke weg kiezen en die custom field in de checkout verwijderen. Ik heb zelf een webshop met redelijk wat bestellingen en tussenvoegsels worden gewoon altijd netjes bij de achternaam ingevuld. Als ik bijvoorbeeld kijk naar de e-mail template
email-addresses.phpzie ik dat naam en adres geladen wordt via de regel. Ik zie daar dus geen filter hook die je zou kunnen benutten zoals je bij de checkout fields heb kunnen doen. Mijn kennis voor jou vraag is te beperkt, dus ik moet je het antwoord schuldig blijven helaas!En? Is er wellicht al een plugin die ik niet ken, en dit mogelijk maakt??
Hoi Antoine, een plugin die op mijn lijstje staat om eventueel te gaan vermelden is dit artikel is WooCommerce e-mail Customizer. Heb ik op dit moment echter nog niet getest of bestudeerd, maar voor zover ik zie alleen geschikt om het uiterlijk aan te passen (en niet de tekst).