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 –
- Email Header
- Email Footer
- Email Item Details
- Email Billing Addresses
- Email Shipping Addresses
- Email Customer Note
- 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 –
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 a 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 in 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 has 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 what 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.
8 Responses
Do I have to upgrade to the pro to get this feature?
Yes, you have to.
Does this plugin also work on Woocommerce Germanised?
Hi Christopher!
CoDesigner is compatible with most of the WooCommerce based plugins out there. The email designer widgets by CoDesigner are compatible with WooCommerce Germenised too.
Also, you can try the free version of CoDesinger with many interesting widgets from this link https://wordpress.org/plugins/woolementor/
Hello, are there short codes or tags available to use?
For example.
{Shippemt_cost}
{Product_bought}
{Product_qty}
{Product_image}
So that it’s not the basic woocommerce table?
Ps. On mobile the site menu is messed up! It is in the middle of my screen 🙂
Hi Myedgy!
Thanks for reaching out to us.
Actually, You don’t need shortcodes or tags to add those fields. You can easily add new fields. Please follow this tutorial- https://youtu.be/Kjqs_2mgECU
You can also use the Placeholders to show the data.
See attachments: https://nimb.ws/W1hfSj
Are you using the CoDesigner “Menu widget” on the site?
Please raise a ticket explaining the issue – https://help.codexpert.io/new-ticket/
Thank you!
hello
How to use password reset email short code uRl
Where is the list of shortcodes?
Hi @ Yasser!
Thanks for your comment.
One of our support representatives replied to you on the messenger.
Please co-operate with him. He will help you with this.
Thank you!