As a business, we all want to grab our customers’ attention and keep them engaged. But let’s face it: sending plain and formal emails won’t cut it anymore. With email marketing becoming more and more popular, it’s crucial to personalize your messages to stand out from the crowd.
Luckily, there’s a tool that can help you take your WooCommerce email customization game to a whole new level: the WooCommerce Email Hook. Not sure what that is? No worries, we’ve got you covered!
In this blog post, we’ll give you the scoop on what WooCommerce email hook is, how it works, and how you can supercharge it with YayMail – WooCommerce email customizer tool.
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.
In web development, hooks are utilized for specifying markup across all pages, streamlining the process of performing Actions and Filters on them. These hooks enable developers to modify or add code without editing core files, making them an invaluable tool for web development.
Two types of hooks are available: Actions and Filters.
- Action Hooks:
These hooks are executed whenever the specified action is triggered. To use an action hook, you need to hook in with the do_action('action_name') function and write your own code.
You should place your code in the add_action('action_name', 'your_function_name') function, where your_function_name is the name of the function that contains your custom code.
- Filter Hooks:
Filter hooks are a useful tool for modifying variables in code, such as product prices.
When using filter hooks, you can apply the function apply_filter('filter name', $variable); to call them in your code.
To modify the passed variable, you can use the add_filter('filter_name', 'your_function_name') function and define your_function_name to include the desired alterations to the variable.
Finally, return $variable; is used to ensure the modified variable is returned.
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.
So What are WooCommerce Email Hooks?
Similarly, if you want to add some additional content to the emails, you can use different email hooks defined by WooCommerce.
So 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.
Now let’s try to add some content to various parts of the email. I believe it will make a significant and dynamic difference to your email. We can use various hooks depending on where we want to place the content.
Real-World Examples of WooCommerce Email Hooks in Action
Basically, WooCommerce doesn’t do a great job of listing out email-only actions and filters, but here are a few listed in the documentation:
woocommerce_email_header( $email_heading, $email )is used to place the custom content just below the header.woocommerce_email_order_details( $order, $sent_to_admin, $plain_text, $email )places the content below the header.woocommerce_email_before_order_table( $order, $sent_to_admin, $plain_text, $email )places the content above the order details table.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.woocommerce_order_item_meta_end( $item_id, $item, $order, $plain_text )places the content below the itemwoocommerce_order_item_meta_start( $item_id, $item, $order, $plain_text )will be added at last after all the other meta information.woocommerce_email_after_order_table( $order, $sent_to_admin, $plain_text, $email )places the content just below the order table.woocommerce_email_order_meta( $order, $sent_to_admin, $plain_text, $email )places the content after the order table and below the hookwoocommerce_email_after_order_table( $order, $sent_to_admin, $plain_text, $email ).woocommerce_email_customer_details( $order, $sent_to_admin, $plain_text, $email )places the content before the customer billing & shipping address.woocommerce_email_footer( $email )places the extra content just above the footer text.woocommerce_display_item_meta( $html, $item, $args )places the item meta data that reflect the product variation in the order table.
Here is an example of email hooks in a WooCommerce email.
To add the code mentioned above, you can navigate to your theme’s functions.php file or a plugin file. Once you’ve added the code, the email sent to the customer will display as shown in the screenshot below.
This illustrates the various options that can be customized through the settings available in WooCommerce. It also highlights the situations where it may be necessary to override the default templates.
Primarily as you can see, the only way to customize your WooCommerce emails to your liking is to hook into actions and filters to add and change email content where you need it as in the example above.
However, if you prefer a more time-saving approach, the upcoming section offers an inventive WooCommerce email customizer option. With this solution, you can add and modify the hooks in your WooCommerce emails without writing a code line. It’s all about the drag-and-drop interface.
Revolutionize WooCommerce Email Hooks with YayMail
YayMail provides a Hooked Element feature that allows you to add any content to various areas of the WooCommerce email template. This opens up a lot of flexibility and customization options for WooCommerce custom emails.
Just Drag & Drop The Hooks and Format Them!
In particular, we build the email customizer framework where users can easily drag and drop elements functioning with all the hooks above. To simplify, the Email Hooks in the default WooCommerce email builder can be compared to Elements in YayMail’s email builder.
For example:
- Element Email Heading plays as the hook
woocommerce_email_header - Element Order Item plays as 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.
Read more: All YayMail’s Elements Supercharging your WooCommerce Email
Use Element ‘Hook’ in YayMail Email Builder
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.
Step 1: Drag & Drop the Hook Element to Email
Go to WooCommerce > Email Customizer. In the Elements 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.
Step 2: Choose the Right Type of Hook
Next, 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.
Step 3: Modify the Hook’s Format for Maximum Impact
Then, modify the format with various options of padding, color, condition, etc. Tips: you should choose a specific order in the “Sample order to show” dropdown list to view 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 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.
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 a Purchase Order Number.
The below image shows what customers will see on the checkout page.
And how does this information displayed in the email template? This is when the hook woocommerce_after_order_table will help. And below is the result.
It will automatically insert the Purchase Order Number which was created when that customer bought the products with the Purchase Order payment method.
Conclusion: The Power of WooCommerce Email Hooks and YayMail
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. So don’t miss out on the easy-to-use, time-saving, and powerful tools like YayMail and YayMail Addons.
There are other ways to add dynamic content to WooCommerce emails that you can refer to here: How to Build WooCommerce Emails with Dynamic Content
Try out for free with us today. If you have any questions about WooCommerce email hooks and tips on optimizing them, don’t hesitate to drop a comment below. We will be there on your hacking growth journey.
Lately, YayMail has reached 25,000 active users and keeps the position to be the best WooCommerce email customizer plugin. You can download YayMail for Free or take it up a notch with our Pro version that unlocks endless possibilities.
Articles you may be interested:
