E-Mails sind oft der erste echte Kontaktpunkt zwischen Deiner Website und Deinen Kund*innen: Kontaktformular, Bestellung, neues Benutzerkonto, Passwort-Reset, Kommentar… Wenn diese Mails generisch aussehen, lässt Du Vertrauen und Conversion liegen. Ziel ist: saubere HTML-Vorlagen, klare Typografie, Branding (Logo, Farben), persönliche Tonalität, sinnvolle CTAs – und natürlich perfekte Zustellbarkeit.
Weg 1: Plug-ins, die „out of the box“ starke Templates liefern
Wenn Du schnell ein professionelles Ergebnis willst, sind diese Lösungen erprobt und flexibel:
- Better Notifications for WP (BNFW): Ersetzt bzw. erweitert die Core-Benachrichtigungen (Benutzer, Beiträge, Kommentare etc.) mit WYSIWYG, Shortcodes, Rollen-Zielgruppen und Add-ons. Ideal für Redaktions-Workflows und Memberships.
- Notification (BracketSpace): „Trigger → Carrier“-Baukasten für Custom Events. Du verschickst E-Mails, Webhooks, Slack u.v.m. – extrem flexibel, dev-freundlich, mit vielen Triggern und Mergetags.
- WP HTML Mail (codemiq): Einheitliches, responsives HTML-Template für alle Mails (Core + viele Form/Shop-Plug-ins), per Editor gestaltbar – ohne Code.
WooCommerce-spezifisch:
- Kadence WooCommerce Email Designer (Live-Preview, markenkonsistentes Styling).
- YayMail – WooCommerce Email Customizer (Drag&Drop-Builder, viele Vorlagen).
Praxis-Tipp: Kombiniere ein Template-Plug-in (z. B. WP HTML Mail) mit einem Benachrichtigungs-Manager (BNFW oder Notification). So hast Du Design + Logik sauber getrennt und bleibst maximal flexibel.
Weg 2: Mit wenigen Zeilen Code in Deiner
functions.php
Wenn Du lieber „lightweight“ arbeitest oder punktuell optimieren willst, reichen oft kleine Filter/Hooks. Bitte immer im Child-Theme oder als Mini-MU-Plugin.
DISCLAIMER
Die Code-Snippets führst du freiwillig und auf eigenes Risiko in Deiner WordPress-Webseite aus. Wir haben den Code geprüft und er hat bei uns funktioniert. Bevor du diesen in Deiner Live-Webseite einsetzt, überprüfe in einer Staging Umgebung oder bei einer separaten oder lokal gehosteten Umgebung, ob das bei Dir fehlerfrei funktioniert. Wir vom WPTeam übernehmen keine Haftung bei ggf. eintretenden Fehlfunktionen deiner WordPress Webseite.
// functions.php (Child-Theme)
// 1) Absendername & -adresse setzen
add_filter('wp_mail_from', function() { return 'no-reply@deinedomain.de'; });
add_filter('wp_mail_from_name', function() { return 'Deine Marke'; });
// 2) HTML als Content-Type
add_filter('wp_mail_content_type', function() { return 'text/html; charset=UTF-8'; });
// Optional: Nach dem Versand wieder auf Text zurückstellen (falls andere Plugins es erwarten)
add_action('phpmailer_init', function($phpmailer) {
if ($phpmailer->ContentType !== 'text/html') {
$phpmailer->ContentType = 'text/html';
}
});Damit setzt Du Branding (From-Name/From-Mail) und aktivierst HTML. Das ist die Basis für hübsche Templates.
2) Eigene Core-Benachrichtigungen überschreiben (Beispiel: neues Benutzerkonto)
// WordPress >=5.7: 'wp_new_user_notification_email' filtert die Mail an den User
add_filter('wp_new_user_notification_email', function($wp_new_user_notification_email, $user, $blogname) {
$subject = 'Willkommen bei ' . get_bloginfo('name') . ' – Dein Zugang ist bereit';
ob_start(); ?>
<table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="font-family:Arial,sans-serif;">
<tr>
<td align="center" style="padding:24px;background:#072d40;color:#ffffff;">
<img src="https://www.wpteam.io/wp-content/uploads/logo-wpteam.png" alt="WP Team" width="140" height="40" style="display:block;margin:0 auto 8px;">
<h1 style="margin:0;font-size:22px;">Schön, dass Du da bist!</h1>
</td>
</tr>
<tr>
<td style="padding:24px;background:#ffffff;color:#1a1a1a;">
<p>Hi <?php echo esc_html($user->display_name); ?>,</p>
<p>Dein Konto wurde erfolgreich angelegt. Mit einem Klick kannst Du Dein Passwort setzen:</p>
<p style="margin:24px 0;">
<a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"
style="display:inline-block;padding:12px 20px;text-decoration:none;border-radius:6px;background:#9fca28;color:#072d40;font-weight:bold;">
Passwort festlegen
</a>
</p>
<p>Beste Grüße<br>Dein WPTeam.io</p>
</td>
</tr>
<tr>
<td style="padding:16px;background:#f2f5f7;color:#6b7785;font-size:12px;">
Diese E-Mail wurde automatisch gesendet. Antworten werden nicht gelesen.
</td>
</tr>
</table>
<?php
$message = ob_get_clean();
return [
'to' => $wp_new_user_notification_email['to'],
'subject' => $subject,
'message' => $message,
'headers' => ['Content-Type: text/html; charset=UTF-8']
];
}, 10, 3);Ergebnis: Du ersetzt die Standard-Plain-Text-Mail durch eine gebrandete HTML-Mail mit CTA-Button – komplett ohne zusätzliches Plug-in.
3) WooCommerce-E-Mails leicht anpassen (Text-Snippets)
Für kleine Textänderungen reicht ein Filter (z. B. in der „Bestellung abgeschlossen“-Mail):
add_filter('woocommerce_email_footer_text', function($text) {
return 'Danke für Deinen Einkauf bei <strong>WPTeam.io</strong> – Fragen? Antworte einfach auf diese E-Mail.';
});Für umfassendes Layout nutze lieber Kadence oder YayMail (Live-Vorschau/Drag&Drop).
4) Einheitliches Header/Footer-Snippet für alle Mails (Quick-Template)
function wpteam_wrap_email($html_body, $title = 'Info von WPTeam.io') {
return '
<div style="background:#f5f7fa;padding:24px;">
<div style="max-width:640px;margin:0 auto;background:#ffffff;border-radius:12px;overflow:hidden;">
<div style="background:#072d40;color:#ffffff;padding:20px 24px;">
<strong style="font-size:18px;">'.$title.'</strong>
</div>
<div style="padding:24px;color:#1a1a1a;line-height:1.5;">'.$html_body.'</div>
<div style="background:#0b3650;color:#bcd4e6;font-size:12px;padding:16px 24px;">
© '.date('Y').' WPTeam.io · Datenschutzkonform in Deutschland
</div>
</div>
</div>';
}
add_filter('wp_mail', function($args) {
// Nur umwickeln, wenn noch kein HTML-Layout erkennbar ist
if (strpos($args['message'], '<table') === false && strpos($args['message'], '<div') === false) {
$args['message'] = wpteam_wrap_email( wpautop( wp_kses_post( $args['message'] ) ), $args['subject'] );
$args['headers'][] = 'Content-Type: text/html; charset=UTF-8';
}
return $args;
});Damit bekommst Du ein simples, konsistentes Layout für alle Mails – selbst wenn Plugins nur Text senden.
Weg 3: Mit Bricks Builder & Bricksforge ganz ohne Programmieren
Bricks Formulare liefern bereits eine gute Basis: Du kannst pro Formular HTML-E-Mails definieren, Felder via Platzhalter einfügen ({all_fields}, {field:name}), Betreff/Empfänger steuern und Bestätigungen gestalten. Für viele Use-Cases reicht das – schnell, visuell, im Projektfluss von Bricks.
Bricksforge setzt noch einen drauf: Über Workflows/Aktionen verarbeitest Du Einsendungen konditional (z. B. Routing nach Auswahl, Double-Opt-In, Anhänge, zusätzliche CC/BCC, Webhooks). So baust Du Dir ohne Custom-Code komplexe E-Mail-Automationen direkt im Bricks-Ökosystem.
(Hinweis: Konkrete Aktions-Bezeichnungen können je nach Version variieren; das Prinzip bleibt gleich: Trigger → Bedingungen → „Send Email“/Webhook → Template mit Variablen.)
Best-Practice-Setup für Bricks/Bricksforge:
- Form-Mail als HTML mit sauberem Inline-CSS, Logo (absoluter URL), klaren CTAs.
- Reply-To auf die Absender-Adresse des Formulars, damit Du direkt antworten kannst.
- Fallback: Falls Mails kritisch sind (Bestellungen, Leads), nimm ein Template-Plug-in wie WP HTML Mail dazu – so bleibt das Design übergreifend konsistent.
Deliverability nicht vergessen
Schöne Mails nützen nichts, wenn sie im Spam landen. Setze SMTP (z. B. über Deinen Provider oder einen dedizierten Dienst), hinterlege SPF/DKIM/DMARC korrekt und sende von einer echten Domain-Adresse (kein „@gmail.com“). Für WooCommerce lohnt sich 1–2 Transaktions-IP(s) bei professionellen Mailern.
Wann Code, wann Plug-in?
Code first, wenn Du punktuell an Core-Mails schraubst, alles im Griff hast und schlank bleiben willst.
Plug-in first, wenn Du viele Vorlagen, Rollen, Trigger oder Shopszenarien abdecken musst – BNFW/Notification für Logik, WP HTML Mail für Design, Kadence/YayMail für WooCommerce.