How To Modify The Email Template In Woocommerce Email Verification

On a daily basis, you probably employ drag-and-drop in a variety of interfaces. For instance, drag and drop your Gmail items to its category, upload files to WordPress media library, or organize your phone home screen apps.

While many folio builder platforms come in to assistance you pattern your website with elevate-and-drop, building WooCommerce transactional emails is even so considered equally a circuitous task.

By default, WooCommerce email settings only permit you to modify basic colour profiles and text. In lodge to customize further, y'all will have to modify the theme lawmaking.

If you are a non-techie and don't want to crack the lawmaking betwixt the scripts in wp-content/plugins/woocommerce/templates/emails/email-styles.php or then, using a drag-and-drop electronic mail architect framework is the all-time solution.

Introducing YayMail

YayMail is an email builder platform deployed for WooCommerce.

Information technology has been developed with ease of utilize every bit the principal goal, merely has been tested for maximum web browser and electronic mail client compatibility while keeping an centre on responsiveness.

You can download and use it for free from WordPress.org. This open source code is forever costless and you won't have to upgrade to whatsoever premium version to fully customize all the default Woo email templates.

At present that you've installed and activated it, head over to WooCommerce > Email Customizer to admission the email editor.

Design emails using the drag and driblet e-mail builder

As a elevate-and-drop editor similar to Elementor folio builder, YayMail comes with all the options and settings on the same screen.

1. Upper toolbar

Here you volition find the first dropdown for all the bachelor WooCommerce e-mail templates. Depending upon the active WooCommerce plugins on your current site, you'll come across new templates over here.

If using a WooCommerce membership plugin, you'll have actress e-mail templates such every bit Membership – Welcome, Membership Reminder, Expired Membership and so on.

The second dropdown, "Sample gild", allows you to option any real society to see how the email's dynamic fields prove on a specific shopper'due south end.

On this upper toolbar, you tin can also detect the near used activeness buttons including:

Shortcodes: Copy a shortcode from hither then paste it into the appropriate block of the electronic mail blueprint.
Ship test electronic mail: One-click to transport a exam bulletin to whatsoever electronic mail address to encounter how your designed email would look like in the inbox.
Bare: Clear all the email blocks then that you can have a completely blank canva then you lot tin start designing for your own purposes.
Copy template: Re-create from a previously designed template and paste information technology into the current electronic mail trunk. Then you can make some little adjustments, so as to avert starting from scratch.
Reset template: This option resets your template to the initial state, significant you still have the default email blocks.
Preview: Instantly see your customized e-mail on desktop and mobile views.
Save: Relieve your edits at any point in time.

2. Collapsible side panel

The YayMail WooCommerce email customizer's side panel consists of ii tabs: Elements and Settings.

All elements are draggable and include tons of customization options. The heading block, for instance, allows you lot to edit its padding, background colour, text color, font family, and other visual options.

While the changes in the Elements tab apply only to the called block, the adjustments in Settings have result for the whole email template.

Some oftentimes used features thus include:

Email container width
Peripheral background color
Hide/Bear witness product image and SKU
Consign/Import email templates

iii. E-mail preview

Since it's a block-based e-mail architect, you tin movement whatever blocks up/downward or employ the handle to drag and driblet information technology.

On the right corner, you lot'll have some options like:

Duplicate the email block
Copy the block to some other template
Remove cake

With YayMail, there are endless customizations you tin make by changing the e-mail designs and layouts, which is non happening if you modify theme code files or utilise WordPress customizer.

Example study: customize WooCommerce lodge confirmation email

To start customizing the guild confirmation electronic mail, go to WooCommerce > Email Customizer > Electronic mail to bear witness. From there, y'all tin cull either Processing order or Completed order.

From and so on, y'all can kickoff adding any elements you'd like. Some elements I'm going to be using include:

Logo: Upload a transparent logo prototype and resize information technology to make it aligned with the email container width
Social icons: Easily choose the social network icons and add together the URL for each platform
Heading: Edit the heading text, heading font, text color, and background color
Image: Add together a custom prototype and accommodate its width using the slide bar
Footer: Add your website links such as My account, Customer support, etc.

At whatsoever point in time, you can click on the Preview button to encounter the email appearance on desktop/mobile in a popup without having to exit or refresh the current page.

Then, you can easily shut the previewer to come up back to the editor.

To see YayMail in activeness, check out this tutorial video to see how it helps you become the job done.

Integrations

Transactional email is a good ways of communication for your marketing purpose. Particularly when you offer a subscription or membership model through WooCommerce, you should customize the email notifications to make your brand profile bespoke and consistent.

Case Study ane: WooCommerce Membership plugin

Past default, this is what your audience receives when their membership at your site is expiring. You lot can edit the text of the field of study, caput, and custom bulletin.

Why not turn this email template into a call to action to brand sure the audience will come back to their membership package?

For this extra content, I'll be using multiple columns for the Expiring Membership email message.

The steps get as follows:

Drag and drop a ii-cavalcade cake onto the email
Edit the column width in percentage, i.e. lxx/30
Add background color or image (optional), here I use white as background color
Pick a text block for the first column
Pick an prototype strip for the second column

That's how I accomplish a multiple column email template for the membership e-mail messages.

Case Study 2: WooCommerce Follow-upwardly emails plugin

With a custom email template extension similar Follow-Ups, yous can send extra content after specific customer actions accept been washed.

There are then many store scenarios in which scheduled automatic emails with custom content can exist sent.

In this section, I'g demonstrating how to create and customize the email template to exist sent later a coupon is used.

Firstly, starting time adding a new follow-up:

Give information technology a name, email subject, and some content
In the Follow-upwardly Type metabox, brand sure to choose Purchase Email
In the lesser boxes, cull trigger equally "after coupon used"
Information technology comes with enough of avant-garde options, then experience free to explore information technology

Then, let's move on the customization steps:

Insert logo and heading
Add an image box element
Insert content and social icons

Since I'm trying to fix the tone for my brand's color profiles, a pinkish colour volition exist used for the heading background color and also the primary image in the image box element.

Designing the blocks is easy so all's left to do is to arrange the padding betwixt the email blocks to achieve the looks and feels you've always wanted.

Quick note: delight refer to their Docs to make sure you get the right YayMail addon for your electric current agile WooCommerce extensions.

Case Study 3: loyalty rewards plugins

A Points and Rewards extension for WooCommerce may generate x+ email notifications to impact base with customers.

The email templates vary depending upon the plugin you employ, only basically it looks like a text bulletin. From the Points Notification settings you can write your ain messages in the Email Description box using their shortcode.

Then, save the changes and caput over to our WooCommerce email customizer. From the dropdown, choose Points and Rewards email to showtime customizing the template.

Let's spice upwards by adding some more media elements such as images, buttons, and links.

This new design volition take effect on all the Points notifications to be sent out. But that the middle notice block will be replaced with the letters y'all've but written in the previous footstep.

Conclusion

There are several methods for WooCommerce e-mail template customization without coding. If source code modification is not your selection, then you can endeavor customizing emails with the aid of plugins.

Some plugins utilise the WordPress customizer to design email templates. However, a drag and drib email builder volition help you create a much more flexible layout with avant-garde options.

Today you tin can try it out by downloading YayMail from the WP repo and apply it completely chance-free as it works seamlessly with all WordPress themes.