Wil je de e-mailtemplates van WooCommerce aanpassen naar de stijl van jouw website of huisstijl, dan zal je er al snel achter komen dat de opties in de WooCommerce instellingen beperkt zijn; je kan vier kleuren aanpassen en “that’s it”. Maar niet getreurd: je kan met behulp van eigen CSS de WooCommerce e-mailtemplates wat meer naar wens vormgeven.

Standaard aanpassingsopties voor e-mailtemplates

De standaard opties van WooCommerce om de e-mailtemplates aan te passen vind je onder WooCommerce > Instellingen > E-mails. Hier kan je de e-mailtemplates voorzien van een eigen header-afbeelding, en de footer tekst en een aantal kleuren aanpassen.

De aanpassingsopties van WooCommerce e-mailtemplates in de instellingen

Door te klikken op Klik hier om een voorbeeld van je e-mail-template te zien boven de aanpassingsopties krijg je een voorbeeld te zien van hoe de standaard e-mailtemplate er uit ziet.

De standaard WooCommerce e-mailtemplate
De standaard WooCommerce e-mailtemplate

Je kan afgezien van deze opties de e-mailtemplates niet verder ‘out of the box’ aanpassen in vormgeving. Als je dit wel graag wil kan je aangepaste CSS code toevoegen aan de e-mailtemplates middels een functie welke inhaakt op de functie-hook woocommerce_email_styles. Deze functie kan je het beste plaatsen in het functions.php bestand van je thema, of in een site-specifieke plugin.

Aangepaste CSS toevoegen aan alle WooCommerce e-mailtemplates

Onderstande functie laat zien hoe je aangepaste CSS toevoegt aan alle e-mailtemplates. In dit voorbeeld maak ik alle h2 kopteksten in de e-mails rood.

/**
 * Add CSS to WooCommerce email templates.
 */
add_filter( 'woocommerce_email_styles', 'wpsimpel_add_css_to_emails', 9999, 2 );
 
function wpsimpel_add_css_to_emails( $css, $email ) {

	$css .= '
		h2 { color: red }
	';
	return $css;
}

Je kan een voorbeeld van de opgeslagen wijzigingen bekijken door de voorbeeldweergave van de e-mailtemplate (WooCommerce > Instellingen > E-mails > Klik hier om een voorbeeld van je e-mail-template te zien) te verversen of opnieuw te openen.

De standaard WooCommerce e-mailtemplate met aangepaste koptekst
De standaard WooCommerce e-mailtemplate met aangepaste koptekst

Aangepaste CSS toevoegen aan specifieke WooCommerce e-mailtemplates

Wil je enkel aanpassingen doen in speciefieke e-mailtemplates? Dat kan door in de functie te refereren naar de id van de e-mailtemplate. Plaats hiervoor een if-statement om de CSS-aanpassingen heen.

In onderstaand voorbeeld maak ik dezelfde aanpassing als het voorbeeld hierboven, maar dan enkel in de ‘Nieuwe bestelling’ ('new_order') e-mailtemplate.

/**
 * Add CSS to specific WooCommerce email template.
 */
add_filter( 'woocommerce_email_styles', 'wpsimpel_add_css_to_emails', 9999, 2 );

function wpsimpel_add_css_to_emails( $css, $email ) { 
	
	// Check if email template is 'new_order'
	if ( $email->id == 'new_order' ) {
		$css .= '
 			h2 { color: red }
	return $css;
}

Alle WooCommerce e-mail ID’s op een rijtje

Wil je eigen CSS toepassen in één of meerdere andere WooCommerce e-mailtemplates? Hieronder vind je een overzicht van alle e-mail ID’s die je hiervoor kan gebruiken.

/**
 * All WooCommerce email ID's
 */

// Cancelled order
if( $email->id == 'cancelled_order') {}

// Completed order
if( $email->id == 'customer_completed_order') {}

// Customer invoice
if( $email->id == 'customer_invoice') {}

// New account
if( $email->id == 'customer_new_account') {}

// Customer note
if( $email->id == 'customer_note') {}

// Order on hold
if( $email->id == 'customer_on_hold_order') {}

// Order refund
if( $email->id == 'customer_refunded_order') {}

// Reset password
if( $email->id == 'customer_reset_password') {}

// Failed order
if( $email->id == 'failed_order') {}

// New order
if( $email->id == 'new_order') {}

Beoordeel deze post:

Gemiddeld: 0 / 5. Aantal beoordelingen: 0

Nog geen beoordelingen

Whoops! 😔

Zou je ons willen laten weten hoe we (deze post) kunnen verbeteren?