Loading...

How to Customize WooCommerce Transactional Email Templates

231 views

Loading...

Loading...

Transcript

The interactive transcript could not be loaded.

Loading...

Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Mar 17, 2020

Full article - https://help.designmodo.com/article/p...
Postcards - https://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 https://designmodo.com/transactional-...
Transactional Email Design: Examples and Best Practices https://designmodo.com/transactional-...

Loading...


to add this to Watch Later

Add to

Loading playlists...