End of Spring Flash SALE

00
00
00
00

Up to 50% OFF!

Grab Now

Customize WooCommerce Emails With Elementor and CoDesigner

Mar 10, 2024

Share this content

Copy Link
Share
customize woocommerce emails with elementor

WooCommerce emails are a major 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 notes, customer invoices, order details, refunded orders, completed orders, processing orders, and orders on hold.

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

CoDesigner made major changes to version 4.3 including the WooCommerce email customizer Elementor. This intuitive new feature lets you create and customize WooCommerce emails with stunning templates that replaces the bland designs of WooCommerce default emails. You can create an Elementor email template to suit your brand’s style with CoDesigner. To streamline the design process of creating WooCommerce customized emails, CoDesigner offers 7 intuitive 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 WooCommerce Custom Emails With CoDesigner

Follow the steps below to use Woocommerce email customizer Elementor to design the perfect email for every occasion –

1. Install Necessary Plugins

Before starting to design Elementor 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 WooCommerce 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 appear 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. Afterwards, you will be redirected to an Elementor Editor page. On this page, you can customize WooCommerce email templates by adding the elements from Elementor and CoDesigner.

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 page, you can customize Woocommerce emails with Elementor using CoDesigner’s 7 email widgets –

  • Email Header – Start by using the drag and drop function to apply 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 WooCommerce email template, then change the description and alignment to your preference.
Add the WooCommerce Email Description widget by CoDesigner
Give 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 anad 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
Use 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
Provide 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

4. Edit Email Template Style

  • 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
Include 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 stand out more 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

5. Set the Email Templates as Default

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.

Wrapping Up

Customizing your WooCommerce emails with Elementor and CoDesigner opens up a world of possibilities for enhancing your brand’s communication with customers.

Take advantage of the powerful features of CoDesigner to easily create visually appealing and highly personalized emails that stand out. Don’t miss out on the opportunity to boost your email marketing strategy—start using the WooCommerce email customizer Elementor today and experience the difference CoDesigner can make.

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 “Customize WooCommerce Emails With Elementor and CoDesigner”

  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