How to Customize Email Template with WooCommerce Email Hooks

How to Customize Email Template with WooCommerce Email Hooks

Lately, WooCommerce email customizer – YayMail has reached 20,000 active users. This is largely due to the number of features it includes.

One of these features is the Hooked Element (custom hooks), which allows you to add any content to various areas of the theme. This opens up a lot of flexibility and customization options for WooCommerce custom emails.

WooCommerce email hooks allow you to add dynamic content to your email template. This blog will let you know what WooCommerce email hooks, how it works, and how to use it in the YayMail email customization tool.

1. What is WooCommerce Hook?

A WooCommerce hook lets you “hook in” to a specific part of your WooCommerce store to add new functionality/data or modify your site’s existing behavior.

For example, you can use hooks to add text or icons to your shopping cart or checkout pages, modify your single product pages, and lots more.

As an end-user, the big benefit of WordPress hooks is that they make it a lot easier for you to modify how your site works or insert new content.

Without hooks, you would need to manually edit your child theme’s template files every time you wanted to make a modification to your site’s code.

2. So What are WooCommerce Email Hooks?

Similarly, if you want to add some additional content in the emails, you can use different email hooks defined by WooCommerce.

You need to keep in mind that hooks will let you add additional content but not modify the existing text. If you want to modify the existing text, you will need to override the templates. You may want to learn more about WooCommerce visual hook guide.

Let’s try to add some content to various parts of the email. There are various hooks we can use depending on where we want to place the content.

3. Here is WooCommerce Email Hooks Example and How It Works

WooCommerce doesn’t do a great job of listing out email-only actions and filters, but here are a few listed in the documentation:

a. woocommerce_email_header ($email_heading, $email) hook is used to place the custom content just below the header.
b. woocommerce_email_order_details ($order, $sent_to_admin, $plain_text, $email) hook places the content below the header.
c. woocommerce_email_before_order_table ($order, $sent_to_admin, $plain_text, $email) places the content above the order details table.
d. woocommerce_order_item_meta_start ($item_id, $item, $order, $plain_text) places the content below the item name in the order table. This meta will be added first before any other meta.
e. woocommerce_order_item_meta_end ($item_id, $item, $order, $plain_text) places the content below the item & woocommerce_order_item_meta_start. This will be added at last after all the other meta information.
f. woocommerce_email_after_order_table ($order, $sent_to_admin, $plain_text, $email) places the content just below the order table.
g. woocommerce_email_order_meta ($order, $sent_to_admin, $plain_text, $email) places the content after the order table and below the hook woocommerce_email_after_order_table ($order, $sent_to_admin, $plain_text, $email).
h. woocommerce_email_customer_details ($order, $sent_to_admin, $plain_text, $email) hook places the content before the customer billing & shipping address.
i. woocommerce_email_footer ($email) hook places the extra content just above the footer text.
Here is an example of email hooks in a WooCommerce email.

hooks-in-woocommerce-email-template-example

4. How to use WooCommerce email hooks in YayMail

In general, the better (and more future-proof) way to customize your WooCommerce emails is to hook into actions and filters to add and change email content where you need it.

In YayMail, we build the email customizer framework where users can easily drag and drop elements functioning with these hooks. For example:

  • Element “Email Heading” plays as the hook woocommerce_email_header
  • Element “Order Item” plays as the hook woocommerce_email_order_detail
Element-Order-Item-functionate-the-hook-woocommerce-email-order-detail
  • Element “Billing Shipping Address” plays as the hook woocommerce_email_customer_details

And of course, YayMail provides more hooks than WooCommerce default hooks to meet all of your needs. All you have to do is drag and drop the elements into the suitable position, then modify the format.

What’s more, in YayMail, you can add any types of additional content that you want for the hooks woocommerce_email_before_order_table and woocommerce_email_after_order_table. This feature is absolutely useful when you intend to add information that was created from a third-party plugin.

Let’s jump into the guideline on how to customize the hooks in YayMail

1. Go to WooCommerce > Email Customizer. In the Element Tab, come to WooCommerce Element. Drag Hook into the position you want.

Here I drag Hooks elements into two positions including before and after the order table.

drag-hooks-elements-into-two-positions-including-before-and-after-the-order-table

2. Edit the hook.

Choose the hook and select “Before” (woocommerce_email_before_order_table) or “After” (woocommerce_email_after_order_table) in the section “WC hook order item”.

choose-before-or-after-in-WC-hook-order-it-woocommerce-email

Next, modify the format with various options of padding, color, condition, etc. Tips: you should choose a specific order view to visually see how it works on an order email.

For example, in this step, I viewed order 132. We can see that it displays a Tracking Information form for the woocommerce_before_order_table hook.

how-it-presents-with-woocommerce-before-order-table-hook

How about the woocommerce_after_order_table hook? I tried it by using a third-party plugin which is B2BKing.

After activating the B2BKing plugin, WooCommerce allows me to add a new payment method which is Purchase Order. I go to WooCommerce > Setting to enable the Purchase Order payment method.

Activate-the-B2BKing-plugin-to-add-a-new-payment-method-which-is-Purchase-Order

From now on, any customer buying products from your store can choose the Purchase Order payment method. Once they choose this method, they will be attached with a Purchase Order Number.

 purchase-order-payment-method-has-been-added

How does this information display in the email template? That is when the hook woocommerce_after_order_table will help. And below is the result.

how-woocommerce-after-order-table-hook-display-on-woocommerce-email

Conclusion

Nowadays, more and more WooCommerce store owners can effectively run their e-commerce store without knowledge of coding thanks to the development of WordPress plugins. Don’t miss out on the easy-to-use, time-saving, and powerful tools like YayMail and YayMail Addons.

Try out for free with us today. If you have any questions about WooCommerce email hooks and tips on optimizing it, don’t hesitate to drop a comment below. We will be there on your hacking growth journey.

Thanh Dinh
Thanh Dinh

Thanh Dinh is a blogger, digital marketer, and tech lover. She likes to explore Marketing and E-commerce tools & tactics and spread them out with people.

Related Posts