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:

WooCommerce e-mail template voor en na

WooCommerce e-mail template voor en na

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:

Inline CSS styles HTML e-mails WooCommerce

Inline CSS styles in versie 2.0.0 van de HTML e-mails in WooCommerce

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:

Woocommerce e-mail template aanpassen

Woocommerce e-mail template aanpassen slechts beperkt mogelijk via WooCommerce instellingen in WordPress

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 <h1></h1>, <h2></h2>, <h3></h3> aen <img alt="" /> een inline styling toekende die eerst niet en uiteindelijk alleen via het gebruik van een lastige filter aan te passen waren. Het moment dat ik tot die ontdekking kwam is allemaal na te lezen in mijn Github issue Links in WooCommerce emails using ‘Email Body Text Colour’.

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!

10 comments on “WooCommerce email templates aanpassen

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

  • 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?

      • 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.php zie ik dat naam en adres geladen wordt via de regel < ?php echo $shipping; ?>. 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!

Geef een reactie

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