Vista previa de email para WooCommerce

Contamos como previsualizar fácilmente los email de WooCommerce para ver como lo vería el cliente. Algo imprescindible si desarrollas con WooCommerce.

El otro día desarrollando una tienda en WooCommerce, me vi en la necesidad de modificar algunos email para añadir contenido, un diseño personalizado, etc…

Siempre he maquetado el email desde 0 según diseño y luego lo integraba con WooCommerce. Pero es un sistema algo lento, lo más rápido sería ir añadiendo lo necesario, etc… sobre la marcha.

Generar un pedido para ver qué tal queda es un poco engorroso así que me puse a buscar alternativas. Encontré este plugin que es una maravilla Preview E-mails for WooCommerce con él, puedes previsualizar todos los email que tiene WooCommerce, facilitando la creación de nuevas funcionalidades.

Preview E-mails for WooCommerce. Plugin imprescindible cuando desarrollas tu tienda WooCommerce, con él podrás previsualizar todos los email que se envían.

También existen alternativas por código, por ejemplo el gist creado por Zach Lovelady en el que te crea un formulario con un selector con todos los email y un campo para insertar el ID del pedido.

Previsualizar los email en las acciones del pedido.

Si necesitas agregar la previsualización de email de WooCommerce en un sitio mejor, podemos añadirlo a la lista de Acciones de pedido, donde también se envían los email a los clientes.

El siguiente código añade todas las plantillas de los email relacionados con el pedido al desplegable como una opción para obtener una vista previa.

function add_email_preview_order_actions( $actions ) {
	
	$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', '
add_email_preview_order_actions' );

También necesitamos el siguiente código para que una vez que selecciones la previsualización se muestre en el navegador.

function 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;
	} );
	
	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, 'preview_order_email' );
}, WC()->mailer()->get_emails() );

El selector quedaría de la siguiente manera.

Conclusión

Personalmente creo que la mejor opción más sencilla es el plugin comentado anteriormente, una vez creado el nuevo diseño del email lo podemos desinstalamos ya que en un principio no lo vamos a necesitar más.