Easy steps to customize WooCommerce Emails with Elementor and CoDesigner (2021)

WooCommerce emails are an essential part of your WordPress-based eCommerce store. It helps to keep both the customer and the site admin well informed about purchase orders and other events. The basic WooCommerce email can send notifications for new account creation, password reset, customer note, customer invoice, order details, refunded order, completed order, processing order, and order on-hold.

The basic WooCommerce email layouts are good but old and cliche, and they do not represent your brand. That’s why CoDesigner has come up with a solution that allows the necessary customization in the email templates.

CoDesigner made major changes to version 3.0 including the Email template designer. This cool new feature lets you create WooCommerce email templates and helps you replace the boring designs of WooCommerce default emails. You can create an email template any way you want with a CoDesigner. To boost the process of email design CoDesigner includes 7 widgets –

1. Email Header
2. Email Footer
3. Email Item Details
4. Email Billing Addresses
5. Email Shipping Addresses
6. Email Customer Note
7. Email Description

 

 

Steps to create cool WooCommerce emails with CoDesigner

Follow the steps below to design WooCommerce default emails with CoDesigner and Elementor –

1. Install necessary plugins

Before starting to design WooCommerce email templates with CoDesigner, make sure you have the following plugin installed on your WordPress site –

1. WooCommerce
2. Elementor
3. CoDesigner
4. CoDesigner Pro

Now that you have all the necessary plugins set up on your WordPress site, let’s start creating email templates with CoDesigner.

 

2. Create a new WCD Email template

Navigate to the Templates tab on the dashboard and click on add new template. A pop-up will come up and you will need to select WCD Email from the dropdown options as shown in the screenshot below.

 

 

Give a name to the email template and click the CREATE TEMPLATE button. Now, you will be redirected to an Elementor editor window. On this page, you can design the email template by adding the elements of Elementor and also the CoDesigner email widgets.

 

 

3. Design the email template

In the Elementor editor, you can use 7 premium widgets by CoDesigner –

• Email Header – First drag and drop the widget in the first section of the template. On the content tab of the email header, you can change the text of the layout, select your preferred HTML tag, and change the alignment.

 

 

• Email Footer – In this widget, you will find the same options as the email header.

 

 

• Email Description – In this step, add the email description in the template, then change the description and alignment.

 

 

• Email Billing Addresses – Now, you can add an inner section after the email description and insert the email billing addresses widget to the right column. Change the title, change the HTML tag, set alignment, and show or hide the title in the content tab as your preference.

 

 

• Email Shipping Addresses -This widget can be added below the email billing addresses widget.  This widget also has the same options as the email billing addresses.

 

 

• Email Item Details – You can add this widget in the right column as shown in the screenshot below. You can show or hide the heading for this widget. Also, there’s an option to Enable CoDesigner Hooks in the content tab.

 

 

• Email Customer Note – This widget is added just below the Email Item Details. You can change the font size, font color, background color, padding, and margin in the style tab.

 

 

• The style and advanced controls are the same for all widgets. You can customize the widgets and make them more beautiful using these options.
• You can also send a test email by clicking the settings icon as shown in the screenshot below.

 

 

4. Set the email templates as default in settings

After creating the email templates, you need to set them up as WooCommerce default templates in CoDesigner settings. Just follow the steps below-

• Click on CoDesigner on the WordPress dashboard and you will see the CoDesigner dashboard.

 

 

• Now click on the Email Designer tab on the CoDesigner dashboard.

 

 

• On this dashboard, you will find 2 tabs called Customer Emails and Admin Emails.

 

 

• On the Customer Emails tab, you can set your templates for – Completed Order, Customer Invoice, New Account, New Account, Customer Note, On-hold Order, Processing Order, Refunded Order, Reset Password

 

 

• The Admin Emails tab have options to set email templates for – New Order, Cancelled Order, Failed Order

 

 

• Now save the templates you have created on these options. I have set this template as a Completed Order email in the settings.
• After placing an order from my test shop, here’s how my email looks like in the inbox.

 

 

Here’s a step-by-step video tutorial showing how to design a completely new email template using CoDesigner.

 

 

This is how you can create single or completely separate templates for each type of WooCommerce email. With CoDesigner you can easily get rid of the boring WooCommerce default email layouts and send totally custom-made, beautiful WooCommerce emails to your customers.