Blog WooCommerce

E-Mails in WooCommerce update-sicher anpassen

Die E-Mail-Benachrichtigungen in WooCommerce sind immer wieder ein beliebtes Thema in unserem Help Desk. Viele Nutzer von WooCommerce möchten die Bestell-E-Mails an ihre CI anpassen oder einfach nur die Formulierung der Texte verändern. Um die notwendigen Veränderungen update-sicher vornehmen zu können, müssen wir erst einmal ein paar Grundlagen zu E-Mails in WooCommerce erläutern. Wie funktioniert…

von

Die E-Mail-Benachrichtigungen in WooCommerce sind immer wieder ein beliebtes Thema in unserem Help Desk. Viele Nutzer von WooCommerce möchten die Bestell-E-Mails an ihre CI anpassen oder einfach nur die Formulierung der Texte verändern. Um die notwendigen Veränderungen update-sicher vornehmen zu können, müssen wir erst einmal ein paar Grundlagen zu E-Mails in WooCommerce erläutern.

Wie funktioniert der E-Mail-Versand in WooCommerce?

WooCommerce versendet E-Mails über die Funktion wp_mail. Der Inhalt der E-Mails wird per Template gesteuert. Diese Templates liegen standardmäßig im Ordner wp-content/plugins/woocommerce/templates/emails. Wird also eine bestimmte E-Mail in WooCommerce versendet (z.B. die Bestellbestätigung), passiert folgendes:

  1. WooCommerce ruft die Methode trigger der jeweiligen E-Mail-Klasse auf. Diese Methode bereitet das Objekt (z.B. eine Bestellung) für den Versand per E-Mail auf.
  2. Innerhalb der Methode werden u.a. der Betreff, der Empfänger und der Inhalt der E-Mail aggregiert. Der Inhalt wird per Template abgerufen, d.h. WooCommerce sucht nach dem zu ladenden E-Mail-Template (eine PHP-Datei z.B.: customer-invoice.php) und führt die Datei aus um den Inhalt dynamisch zu erzeugen.
  3. Die Methode send der Eltern-Klasse WC_Email wird aufgerufen. Dabei werden Betreff, Empfänger, Inhalt usw. übergeben. Die Methode setzt ein paar Filter und erweitert den HTML-Inhalt um Inline-Layout-Angaben. Anschließend sorgt die WordPress-Core-Funktion wp_mail für den E-Mail-Versand.

Wie lassen sich die E-Mail-Templates anpassen?

Die WooCommerce E-Mail-Template-Dateien findet ihr alle im Plugin-Ordner unter wp-content/plugins/woocommerce/templates/emails. Jede E-Mail-Vorlage besitzt dabei ein eigenes Template (z.B. customer-processing-order.php für die Bestellbestätigung). Für die Anpassung der Templates gibt es zwei Möglichkeiten:

Manuelles verschieben im Child-Theme

Solltest du noch kein Child-Theme verwenden, dann ist jetzt der richtige Zeitpunkt dafür. Child-Themes sind wichtig, damit deine Änderungen bzw. Erweiterungen auch nach dem Update des Eltern-Themes vorhanden sind.

Um nun die E-Mail-Templates von WooCommerce überschreiben zu können, müsstest du z.B. per FTP in deinem Child-Theme den Ordner woocommerce/emails anlegen. In diesen Ordner kopierst du das Template, das du überschreiben willst (z.B. customer-processing-order.php). Die Original-Dateien findest du, wie bereits erwähnt, direkt im Plugin-Ordner von WooCommerce.

Automatisches verschieben per E-Mail-Einstellungen

Je nach Dateirechten, kann es sein, dass du unter WooCommerce > Einstellungen > E-Mails > Bestellbestätigung (oder jede andere E-Mail-Vorlage) unter HTML-Template die Möglichkeit hast, die Datei direkt in dein Theme zu kopieren. Dann sparst du dir theoretisch den Schritt des manuellen Kopierens.

Zudem ist es (je nach Dateirechten) möglich, die kopierte Datei direkt per Editor im Admin-Bereich zu bearbeiten. Sauberer bzw. weniger fehleranfällig ist es jedoch einen echten Editor (am besten eine PHP-IDE) zu verwenden.

E-Mail-Template bearbeiten

Nun da wir eine Kopie des E-Mail-Templates im Child-Theme vorliegen haben, können wir uns näher mit dem Inhalt befassen. Für PHP-Neulinge mag das u.U. befremdlich wirken, denn die Ausgabe des Textes erfolgt per printf oder den Gettext-Funktionen. Grundsätzlich ist es aber möglich, komplett darauf zu verzichten und den Inhalt per “einfachem” HTML auszugeben. 

<p><?php printf( esc_html__( 'Hi %s,', 'woocommerce' ), esc_html( $order->get_billing_first_name() ) ); ?></p>
<p><?php printf( esc_html__( 'Just to let you know — we\'ve received your order #%s, and it is now being processed:', 'woocommerce' ), esc_html( $order->get_order_number() ) ); ?></p>

Dieser Auszug dient als kleines Beispiel, wie WooCommerce die Ausgabe in den E-Mails vornimmt. Der dynamische Inhalt der 1. Zeile wird (nach Übersetzung per Sprachdatei) zu “Hallo {Vorname des Bestellers}”. Stattdessen könnte man auch folgendes Snippet verwenden:

<p>Hallo <?php echo $order->get_billing_first_name(); ?></p>

Nachteil hierbei ist, dass das nicht i18n-kompatibel ist, d.h. das WPML oder ein anderes Multi-Language-Plugin keine echte Chance hat den Inhalt zu übersetzen. Wichtig ist in jedem Fall zu wissen, welche globalen Variablen zur Verfügung stehen. Im Fall von Bestell-E-Mails ist ziemlich sicher, dass die Variable $order – ein WC_Order Objekt existiert und genutzt werden kann.

Layout der E-Mail-Vorlage verändern

Das Layout der WooCommerce-E-Mails ist recht simpel und kann natürlich beliebig erweitert werden. Für die E-Mail-Benachrichtigungen auf vendidero.de haben wir z.B. einige Änderungen am Layout vorgenommen. Über den Filter woocommerce_email_styles lassen sich einfach eigene CSS-Snippets hinzufügen. Alternativ könnt ihr das Template emails/email-styles.php aus dem WooCommerce-Template-Ordner in euer Child-Theme kopieren und die Styles direkt anpassen.

Wir verwenden z.B. eine andere Font-Definition in unseren E-Mails:

body {
   padding: 0;
   font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

Diese Änderung lässt sich einfach per Filter in der functions.php eures Child-Themes integrieren:

function vendidero_adjust_email_styles( $styles ) {
    ob_start(); ?>
    body {
       padding: 0;
       font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    }
    <?php 
    $styles .= ob_get_clean();
    return $styles;
}
add_filter( 'woocommerce_email_styles', 'vendidero_adjust_email_styles', 10, 1 );

Natürlich kannst du noch weitere Layout-Anpassungen vornehmen. Damit das klappt, solltest du die HTML-Struktur der E-Mails kennen.

E-Mail HTML-Layout debuggen

Um Layout-Veränderungen per CSS durchzuführen, müssen wir die HTML-Struktur der E-Mails genauer kennen. Dafür gibt es verschiedene Möglichkeiten:

  1. Du verwendest die Vorschau unter WooCommerce > Einstellungen > E-Mails > E-Mail-Vorlage (ganz unten) und klickst auf den Vorschau-Link. Nun öffnest du einfach die Chrome Developer Tools oder schaust dir den Seitenquelltext an.
  2. Um den Quelltext einer konkreten E-Mail zu analysieren kannst du dir z.B. die E-Mail an deine Adresse schicken lassen und dann mit Hilfe deines E-Mail-Clients den Quelltext der E-Mail öffnen.
  3. Wenn du in einer Entwicklungsumgebung arbeitest, kannst du im Template emails/email-footer.php ganz am Ende einfach ein <?php exit(); ?> setzen um das Script abbrechen zu lassen. Wenn du jetzt z.B. die “E-Mail erneut versenden” Funktion aufrufst, sollte dir der Quelltext im Browser angezeigt werden. Du kannst dann ähnlich wie in Punkt 1 vorgehen.

Login