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