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

Mar 10, 2024

Share this content

Copy Link
Share
customize woocommerce emails with elementor

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
WooCommerce Elementor Addon - CoDesigner email widgets to design WooCommerce email templates
CoDesigner email widgets to design and customize WooCommerce email with Elementor

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 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.

Create email template
Create a WCD email template

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.

Name the email template and click create templates
Name the email template and click Create Template

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.
Add the WooCommerce Email Header widget by CoDesigner
Add the WooCommerce Email Header widget by CoDesigner
  • Email Footer – In this widget, you will find the same options as the email header.
Add the WooCommerce Email Footer widget by CoDesigner
Add the WooCommerce Email Footer widget by CoDesigner
  • Email Description – In this step, add the email description in the template, then change the description and alignment.
Add the WooCommerce Email Description widget by CoDesigner
Add the WooCommerce Email Description widget by CoDesigner
  • 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.
Add the WooCommerce Email Billing Address widget by CoDesigner
Add the WooCommerce Email Billing Address widget by CoDesigner
  • 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.
Add the WooCommerce Email Shipping Address widget by CoDesigner
Add the WooCommerce Email Shipping Address widget by CoDesigner
  • 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.
Add the WooCommerce Email Item Details widget by CoDesigner
Add the WooCommerce Email Item Details widget by CoDesigner
  • 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.
Add the WooCommerce Email Customer Note widget by CoDesigner
Add the WooCommerce Email Customer Note widget by CoDesigner
  • 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.
Send a test email from the settings
Send a test email from the settings

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.
Navigate to CoDesigner on WordPress Dashboard
Navigate to CoDesigner on WordPress Dashboard
  • Now click on the Email Designer tab on the CoDesigner dashboard.
Select Email Designer
Select Email Designer
  • On this dashboard, you will find 2 tabs called Customer Emails and Admin Emails.
Customer and Admin WooCommerce Emails Customization
Customer and Admin WooCommerce Emails Customization
  • 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
Edit the Customer WooCommerce Emails
Edit the Customer WooCommerce Emails
  • The Admin Emails tab has options to set email templates for – New Order, Cancelled Order, Failed Order
Edit the Admin WooCommerce Emails
Edit the Admin WooCommerce Emails
  • 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.
Sample WooCommerce Email designed using CoDesigner and Elementor
Sample WooCommerce Email designed using CoDesigner and Elementor

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.

Subscribe to Our Newsletter

Get the latest WordPress tutorials, trends, and resources right in your inbox. No Spamming, Unsubscribe Anytime.

Please fill out the empty field.

preloader

Thank you for subscribing to our newsletter!

Nazmus Sadat

A WordPress enthusiast, content creator, and tech admirer. Loves to learn new things and help others.

8 thoughts on “Easy steps to customize WooCommerce Emails with Elementor and CoDesigner (2024)”

  1. 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 🙂

    1. Md. Mustakim Ahmed

      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!

    1. Md. Mustakim Ahmed

      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!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top