How to Customize WooCommerce Transactional Email Templates
Vložit
- čas přidán 16. 03. 2020
- Full article - help.designmodo.com/article/p...
Postcards - designmodo.com/postcards/
► Learn how to improve the Woocommerce Transactional Email template using a customized, good-looking, and fully responsive template created in Postcards. Our helpful guide will walk you through this routine.
Transactional emails play a crucial role in building good relationships with customers. They are the foundation of every online store and a successful email marketing campaign.
There are many types of transactional emails. However, today, we are going to improve the most popular one, such as "Order detail."
I bet everyone uses them. However, not everyone customizes them, sticking to the default version. It is here where you lose an opportunity to reinforce the impact of the overall email marketing campaign as well as benefit from introducing additional shopping incentives.
To help you seize this opportunity, we have created a video tutorial.
If you think that customizing default Woocommerce transactional email is hard because you do have neither coding nor design skills, then we are going to prove you wrong.
With Postcards, any non-tech-savvy person can create a fantastic email newsletter template.
► Our tutorial includes 11 steps.
The only thing that is required is patience to repeat everything step by step. After all, it is a video. If something feels baffling, you can easily pause the stream and play the confusing part once again.
Before jumping into a tutorial, make sure you have a Designmodo account and a working Woocommrce store or at least installed and activated Woocommerce plugin.
► So what are the steps?
Step 1 Create and export a Postcards template.
Open Postcards. Drag and drop those blocks that fit you most. In our case, it is just a simple content block that lists the order items and includes basic information.
Export the template simply by clicking on the button. Here you need to check the "Host images online" option to avoid the hustle and bustle of dealing with images by yourself.
Step 2 Download the WooCommerce Email Test plugin. Install and activate it. It will test our customized email in a live preview.
Step 3 Overview of how to edit WooCommerce email templates. Here we will show the structure of basic email and highlight what should be changed.
Step 4 Edit the styles by altering email-styles.php. We are going to replace the default code with ours. Although there is lots of code inside, do not worry - just follow our precise instructions, and you will easily nail it.
Step 5 Another file to edit is email-header.php. It is here where we alter the opening part of the template.
At this point, our styles, as well as the header, are set up. The dirty work is done; it is time to add content.
Step 6 Begin editing the customer-completed-order.php file. Title and subtitles are what we are going to change here.
Step 7 Edit the email-order-details.php file. It is here where we show how you can edit the order details. This part is crucial since it conveys information that is valuable for the customer. So pay attention to details.
Step 8 Edit the email-address.php file. It is time to edit the actions for the email to function correctly.
Step 9 Add the order items code to email-order-details.php. This step shows how to tweak the table with Order items.
Step 10 Add the total price table to email-order-details.php. Let us display the total price using our styles.
Step 11 Polish the email newsletter by finishing off the customer-completed-order.php file.
That is all, your fully customized Woocommerce transactional email template that skillfully covers order details is ready to impress.
Read more:
How to Create a Good Transactional Email that Converts designmodo.com/transactional-...
Transactional Email Design: Examples and Best Practices designmodo.com/transactional-...
Thank you its really help
Hi Thanks for the video and Page tutorial. It is very well presented - Trouble is I cant get it to work.
I have only gotten as far as the header but the code that puts the title in doesn't work - it puts it outside document at the bottom left of screen with no formatting.
Awesome
Thank you very muchh
The @font-face declarations are stripped out by WooCommerce. I believe your demo is even falling back to another font vs the Fira Sans font. The rest of your tutorial was great though, so thank you. I just wish I could get WooCommerce to use the actual font I want.
Can you provide those files which you've updated, so we can replace them
how to customize html mail woocommerce for all? have to all conditions new account email and more
How about a no-code solution?
Will this work for Shopify? or just for WooCommerce?
Yes, please follow our guides:
help.designmodo.com/article/postcards-upload-email-template-shopify/
help.designmodo.com/article/postcards-woocommerce/
Pena não ter português e não respondem os emails
Isnt there an easier way? This is SO much effort if you want to replace all emails with HTML emails I make :(
other option is to buy a plugin for about $40/yr
The final file for email-order-details.php is not right. I get duplicate Order number and Order date tbody