Sending HTML emails

Two ways to send HTML email #

WunderAutomation has two built in actions that supports sending HTML emails, one standard and one that explicitly piggybacks on WooCommerce (if it’s installed). Just like the built in plain text email action, both HTML email actions sends the resulting HTML email using the wp_mail() function.

Using the wp_mail() function means that WunderAutomation will use any existing 3rd party functionality that might in place to send outbound emails.

Send HTML email (standard action) #

The standard Send HTML email action relies on overridable templates for the basic design. The standard HTML email action also allows you to skip using templates if you prefer to compose your HTML email entirely in the editor.

The heading field #

The heading field is available for both the HTML email actions. Inspired by the WooCommerce standard HTML email template, WunderAutomation also uses a “heading” field:

Standard HTML email send out via WunderAutomation as it would look in Gmail.

The style field #

Available only for the standard HTML email action. The style field allows you to add additional CSS rules that will be added to the style section of the rendered email. If you are using the email templates (default), any css rules in the style field are added AFTER the css rules in the template.

Templates for standard HTML emails #

The following templates are used to control the look and field of emails created using the standard HTML email action:

Template nameDescription
emails/email-styles.phpCSS rules
emails/email-header.phpRenders the start of the HTML email at least up until and including the opening <body> tag. The default template renders the heading area and the start of a table structure suitable for HTML emails
emails/email-footer.phpRenders the end of the HTML email. Must close all tags opened in the header

The original templates are located in: wp-content/plugins/wunderautomation/templates

Overriding a template #

The above templates can be overridden by creating a subfolder named: wunderautomation in your active theme and place a copy of any (or all) of the template files there.

Example: Overriding email-header.php in the TwentyTwenty theme

The resulting folder should be: wp-content/themes/yourtheme/wunderautomation/emails

When WunderAutomation needs to render a template, it will first look for the file in the wunderautomation subfolder of your theme and if it can’t be found there, it will fall back to using the template provided with WunderAutomation.

Modifying template colors #

If you’re using the built in email templates, it’s also possible to modify the built in templates color scheme via WordPress filters. The following filters are used:

FilterDefaultDescription
wunderautomation_email_background_color#f1f1f1Background outside email body
wunderautomation_email_body_background_color#ffffffMain body background
wunderautomation_email_base_color#0073aaBase color for heading background
wunderautomation_email_base_text#ffffffText color for heading
wunderautomation_email_text#040404Default text color
wunderautomation_email_link_color#0073aaDefault link color
wunderautomation_email_bg_darker_10#f0f0f0Darker version for background, used for border color.
wunderautomation_email_body_darker_10#aaaaaaDarker version for body background, used for border color.
wunderautomation_email_base_lighter_20#2277a0Used for Text shadow for H1 tags
wunderautomation_email_base_lighter_40#4c93b5Not used
wunderautomation_email_text_lighter_20#525252Lighter text, used in table details.
wunderautomation_email_text_lighter_40#949494Lighter text, used in footer

Skipping the template #

It’s possible to send HTML emails without using the built in templates. Check the “Skip templates” checkbox to make WunderAutomation render the emails without templates.

When sending emails without template, the action content field needs to contain all the needed HTML. In order for the emails to render properly in some email clients you might need to include a full <html><head/><body/></html> structure with the style tag inserted in the head tag. To make this easier, WunderAutomation offers a special placeholder [WASTYLE]:

Send WooCommerce email #

The WooCommerce email action takes all styling configuration from WooCommerce. This includes template files, header image, color configuration etc. found in the WooCommerce email settings:

Read more about how to customize WooCommerce email settings here.

Powered by BetterDocs

Leave a Reply

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