How to Create Custom Email Templates in WooCommerce?

We will learn how to create custom email templates in WooCommerce. A custom email template is an email template that a company creates using its own brand identity such as colors, fonts and etc.

If you require expert assistance or want to develop custom unique functionality, hire WooCommerce Developers for your project.

To create a custom email template in WooCommerce, you can follow these steps:

Step 1. Creating the new plugin for Custom Email Templates

First, we will create a plugin to create custom email templates.’function.php’ is the root file of the plugin. It contains a custom menu page.

<?php
/**
 * Plugin Name: WooCommerce Template
 * Version: 1.0.0
 * Author: Webkul
 * Author URI: http://webkul.com
 * Plugin URI: http://webkul.com/#
 * Domain Path: /languages/
 * Text Domain: webkul
 *
 * @package WooCommerce
 */

use EMAILSYSTEM\Emails\WB_Email;

defined( 'ABSPATH' ) || exit();
! defined( 'WB_PLUGIN_FILE' ) && define( 'WB_PLUGIN_FILE', plugin_dir_path( __FILE__ ) );

class Main_Class {

	/**
	 * constructor
	 */
	public function __construct() {
		add_action( 'admin_menu', array( $this, 'wb_custom_menu_page' ) );
	}

	/**
	 * Register a custom menu page.
	 */
	function wb_custom_menu_page() {
		add_menu_page( esc_html__( 'Email', 'webkul' ), esc_html__( 'Email System', 'webkul' ), 'manage_options', 'email-menu', array( $this, 'my_custom_menu_page' ), 'dashicons-email', 59 );
	}

	/**
	 * Display a custom menu page
	 */
	function my_custom_menu_page() {
		include WB_PLUGIN_FILE . 'emails/class-wb-email.php';
		$mail = new WB_Email();
		$mail->get_template();
	}

}
new Main_Class();

Step 2. Creating the Custom Email Manager for custom email template

The 2nd thing that we need to create an email manager class. This class would queue up all custom emails in the WooCommerce email queue. In our case, Admin sends the email manually to users.

Create the class-wb-email.php file in the /emails/ folder of your plugin and put The below code in the file of the plugin ‘/emails/ class-wb-email.php’.

<?php
/**
 * Send Email To User User.l
 */

namespace EMAILSYSTEM\Emails;

use EMAILSYSTEM\Emails\Custom_Email;

defined( 'ABSPATH' ) || exit;

if ( ! class_exists( 'WB_Email' ) ) {
	/**
	 * Send Email To User
	 */
	class WB_Email {

		/**
		 * Transaction class object.
		 *
		 * @var object  $helper Transaction class object.
		 */
		protected $helper;

		/**
		 * Construct
		 */
		public function __construct() {

			include WB_PLUGIN_FILE . 'emails/class-custom-email.php';
			$this->helper = new Custom_Email();
			$this->wb_process_request();

		}

		/**
		 * Process request
		 *
		 * @return void
		 */
		public function wb_process_request() {

			if ( ! empty( $_POST['wb-email-submit'] ) ) {
				$this->wb_validate_request( $_POST );
			}

		}

		/**
		 * Template
		 *
		 * @return void
		 */
		public function get_template() {
			?>
			<div class="wrap">
				<form method="post" id="customer-email">
					<h1><?php echo esc_html__( 'Send Email To User', 'webkul' ); ?></h1>
					<p><?php esc_html_e( 'Admin can send email manually to users.', 'webkul' ); ?></p>
					<table class="form-table">
						<tbody>
							<tr valign="top">
								<th scope="row" class="titledesc">
									<label for="webkul-user"><?php echo esc_html__( 'User', 'webkul' ); ?></label>
								</th>
								<td>
									<input type="text" class="regular-text" name="webkul-user" id="webkul-user" title="<?php echo esc_html__( 'User', 'webkul' ); ?>" placeholder="Username or email">
								</td>
							</tr>
							<tr valign="top">
								<th scope="row" class="titledesc">
									<label for="webkul-email-subject"><?php echo esc_html__( 'Subject', 'webkul' ); ?></label>
								</th>
								<td>
									<input type="text" class="regular-text" name="webkul-email-subject" id="webkul-email-subject" >
								</td>
							</tr>
							<tr valign="top">
								<th scope="row" class="titledesc">
									<label for="webkul-message"><?php echo esc_html__( 'Mesaage', 'webkul' ); ?></label>
								</th>
								<td>
									<?php
									$id       = 'webkul-message';
									$settings = array(
										'tinymce'       => true,
										'textarea_name' => 'webkul-message',
										'media_buttons' => false,
									);
									wp_editor( '', $id, $settings );
									?>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="action-submit">
						<?php
							submit_button( esc_html__( 'Send email', 'webkul' ), 'primary', 'wb-email-submit' );
						?>
					</div>
				</form>
			</div>
			<?php
		}

		/**
		 * Validate Email function
		 *
		 * @param array $data Email form data.
		 * @return void
		 */
		public function wb_validate_request( $data ) {

			$mesg    = esc_html__( 'User filed is mandatory.', 'webkul' );
			$user    = ! empty( $data['webkul-user'] ) ? $data['webkul-user'] : $this->wb_print_notification( $mesg, 1 );
			$subject = isset( $data['webkul-email-subject'] ) ? sanitize_text_field( $data['webkul-email-subject'] ) : '';
			$message = isset( $data['webkul-message'] ) ? sanitize_text_field( $data['webkul-message'] ) : '';

			if ( ! empty( $user ) ) {
				$user_data = get_user_by( 'email', $user );
				$user_data = ! empty( $user_data ) ? $user_data : get_user_by( 'login', $user );
				if ( ! empty( $user_data ) ) {
					$email = $user_data->user_email;
				} else {
					$mesg = esc_html__( 'User is not exist', 'webkul' );
					$this->wb_print_notification( $mesg, 1 );
				}
			}

			if ( empty( $subject ) ) {
				$mesg = esc_html__( 'Subject is mandatory', 'webkul' );
				$this->wb_print_notification( $mesg, 1 );
			}

			if ( empty( $message ) ) {
				$mesg = esc_html__( 'Message is mandatory', 'webkul' );
				$this->wb_print_notification( $mesg, 1 );
			}

			if ( ! empty( $email ) && ! empty( $subject ) && ! empty( $message ) ) {
				$this->helper->trigger( $email, $subject, $message );
				$mesg = esc_html__( 'Mail send successfully.', 'webkul' );
				$this->wb_print_notification( $mesg, 0 );
			}
		}

		/**
		 * Print notification.
		 *
		 * @param string $message Error message.
		 * @return void
		 */
		public function wb_print_notification( $message, $error_code ) {

			if ( 0 === $error_code ) {
				?>
				<div class='notice notice-success is-dismissible'>
					<p><?php echo esc_html( $message ); ?></p>
				</div>
				<?php
			} elseif ( 1 === $error_code ) {
				?>
				<div class='notice notice-error is-dismissible'>
					<p><?php echo esc_html( $message ); ?></p>
				</div>
				<?php
			}

		}
	}
}

Step 3. Creating the Email class

Create an email class for each of our custom emails. This class will extend the WC_Email class.

Create the class-custom-email.php file in the /emails/ folder of your plugin.

class-custome-email.php

<?php
/**
 * Send Email.
 */

namespace EMAILSYSTEM\Emails;

defined( 'ABSPATH' ) || exit;

if ( ! class_exists( 'Custom_Email' ) ) {
	/**
	 * Send Email
	 */
	class Custom_Email extends \WC_Email {

		/**
		 * Constructor of the class.
		 */
		public function __construct() {

			$this->enabled       = true;
			$this->id            = 'new_query';
			$this->title         = esc_html__( 'Webkul Mail', 'webkul' );
			$this->description   = esc_html__( 'Query emails are sent to chosen recipient(s) ', 'webkul' );
			$this->heading       = esc_html__( 'Webkul Mail', 'webkul' );
			$this->subject       = '[' . get_option( 'blogname' ) . ']' . esc_html__( ' New Query', 'webkul' );
			$this->template_html = 'emails/customer.php';
			$this->footer        = esc_html__( 'Thanks regarding webkul.', 'webkul' );
			$this->template_base = WB_PLUGIN_FILE . 'templates/';
			// Call parent constructor.
			parent::__construct();
			// Other settings.
		}

		/**
		 * Trigger.
		 *
		 * @param int $order_id order id
		 */
		public function trigger( $email, $subject, $message ) {

			if ( ! empty( $email ) && ! empty( $subject ) && ! empty( $message ) ) {
				$this->recipient = $email;
				$this->data      = array(
					'email'   => $email,
					'subject' => $subject,
					'message' => $message,
				);
				$this->subject   = $subject;
				$this->heading   = $subject;
				$headers         = 'MIME-Version: 1.0' . "\n";
				$headers        .= 'From: ' . get_option( 'admin_email' ) . "\n";
				$headers        .= 'Content-type: text/html; charset=iso-8859-1' . "\n";
				$headers        .= "X-Priority: 1 (Highest)\n";
				$headers        .= "X-MSMail-Priority: High\n";
				$headers        .= "Importance: High\n";
				$this->headers   = $headers;
			}

			if ( $this->is_enabled() && $this->get_recipient() ) {
				$this->send( $this->get_recipient(), $this->get_subject(), $this->get_content(), $this->get_headers(), $this->get_attachments() );
			}

		}

		/**
		 * Get content html.
		 *
		 * @return string
		 */
		public function get_content_html() {

			return wc_get_template_html(
				$this->template_html,
				array(
					'email_heading'      => $this->get_heading(),
					'admin_email'        => $this->get_recipient(),
					'data'               => $this->data,
					'blogname'           => $this->get_blogname(),
					'sent_to_admin'      => false,
					'plain_text'         => false,
					'email'              => $this,
					'additional_content' => $this->get_additional_content(),
				),
				'',
				$this->template_base
			);

		}

	}
}

Step 4. Creating custom email templates in WooCommerce

Now we need to create email templates:

Create the WooCommerce template structure, Create all email templates inside the templates/emails/ folder of plugins.

Template, file name ‘customer.php.

<?php
/**
 * Email templates
 */

defined( 'ABSPATH' ) || exit;

$username          = html_entity_decode( esc_html__( 'Email : ', 'webkul' ), ENT_QUOTES, 'UTF-8' );
$user_email        = $data['email'];
$user_obj          = get_user_by( 'email', $user_email );
$user_name         = $user_obj->first_name ? $user_obj->first_name . ' ' . $user_obj->last_name : esc_html__( 'Someone', 'webkul' );
$admin             = html_entity_decode( esc_html__( 'Message : ', 'webkul' ), ENT_QUOTES, 'UTF-8' );
$admin_message     = html_entity_decode( $data['message'] );
$reference         = html_entity_decode( esc_html__( 'Subject : ', 'webkul' ), ENT_QUOTES, 'UTF-8' );
$reference_message = html_entity_decode( $data['subject'], ENT_QUOTES, 'UTF-8' );

do_action( 'woocommerce_email_header', $email_heading, $email );

$result = '<p>' . html_entity_decode( esc_html__( 'Hi', 'webkul' ), ENT_QUOTES, 'UTF-8' ) . ', ' . $admin_email . '</p>
		   <p>' . $admin_message . '</p>';

if ( isset( $additional_content ) && ! empty( $additional_content ) ) {
	$result .= '<p> <strong>' . html_entity_decode( esc_html__( 'Additional Content : ', 'webkul' ), ENT_QUOTES, 'UTF-8' ) . '</strong>' . html_entity_decode( $additional_content, ENT_QUOTES, 'UTF-8' ) . '</p>';
}

echo wp_kses_post( $result );

do_action( 'woocommerce_email_footer', $email );

The final output of this blog:

https://cdnblog.webkul.com/blog/wp-content/uploads/2023/06/screen_record_1687245794659.webm

Support

For any technical assistance kindly raise a ticket or reach us by email at support@webkul.com. Thanks for Your Time! Have a Good Day!

Also, discover various solutions to add more features and enhance your online store by visiting the WooCommerce plugins.