Preview WooCommerce Order Emails

Sending out emails to customers is an important step in the eCommerce process. You need to make sure everything is working and showing as expected.

WooCommerce doesn’t have a way of previewing order emails other then actually sending one out. Not the easiest way, nor does it allow you to view a email of a specific customer/order.

In this post I’ll show how you can add a preview option with a code snippet within your store’s orders so you can instantly view how a email would look like when send out (or has looked like when already sent).

Preview Order Email Actions

The first thing I’d like to do is add a nice way to add this in the User Interface of WooCommerce orders. The most intuitive location to add this for me would be in the ‘Order actions’ list, where you can also send the emails to customers. 

The following snippet adds all order related emails to the dropdown as a option to preview. 

	<?php // For implementation instructions see: https://aceplugins.com/how-to-add-a-code-snippet/
	// Add preview order actions
	function ace_add_email_preview_order_actions( $actions ) {
	// Filter non-order emails
	$order_emails = array_filter( WC()->mailer()->get_emails(), function( $email ) {
	return strpos( $email->id, 'order' ) !== false;
	});
	foreach ( $order_emails as $k => $email ) {
	$actions['preview_' . $email->id ] = sprintf( __( 'Preview %s email' ), $email->get_title() );
	}
	return $actions;
	}
	add_filter( 'woocommerce_order_actions', 'ace_add_email_preview_order_actions' );

view raw order-email-preview-in-woocommerce--order-action-list.php hosted with ❤ by GitHub

This is how it should look like approximately, if you have additional plugins installed that add more emails it could show them accordingly there too.

Previewing the Order Email

The next snippet is required to actually display the order email preview when you’ve selected one of the preview actions in the Order actions section.

	<?php // For implementation instructions see: https://aceplugins.com/how-to-add-a-code-snippet/
	// Preview email
	function ace_preview_order_email( $order ) {
	$email = array_reduce( WC()->mailer()->get_emails(), function( $email, $m ) {
	$preview_email_id = str_replace( 'woocommerce_order_action_preview_', '', current_action() );
	return $preview_email_id == $m->id ? $m : $email;
	} );
	/** @var WC_Email $email */
	if ( $email instanceof WC_Email ) {
	$email->setup_locale();
	$email->object = $order;
	echo apply_filters( 'woocommerce_mail_content', $email->style_inline( $email->get_content_html() ) );
	$email->restore_locale();
	die;
	}
	}
	array_map( function( $email ) {
	add_action( 'woocommerce_order_action_preview_' . $email->id, 'ace_preview_order_email' );
	}, WC()->mailer()->get_emails() );

view raw order-email-preview-in-woocommerce--order-action-list.php hosted with ❤ by GitHub

With that in place and when performing one of the preview order email actions it’ll show the email preview accordingly right in your browser;