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.

img

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:

img 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 name Description
emails/email-styles.php CSS rules
emails/email-header.php Renders the start of the HTML email at least up until and including the opening tag. The default template renders the heading area and the start of a table structure suitable for HTML emails
emails/email-footer.php Renders 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.

img 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:

Filter Default Description
wunderautomation_email_background_color #f1f1f1 Background outside email body
wunderautomation_email_body_background_color #ffffff Main body background
wunderautomation_email_base_color #0073aa Base color for heading background
wunderautomation_email_base_text #ffffff Text color for heading
wunderautomation_email_text #040404 Default text color
wunderautomation_email_link_color #0073aa Default link color
wunderautomation_email_bg_darker_10 #f0f0f0 Darker version for background, used for border color.
wunderautomation_email_body_darker_10 #aaaaaa Darker version for body background, used for border color.
wunderautomation_email_base_lighter_20 #2277a0 Used for Text shadow for H1 tags
wunderautomation_email_base_lighter_40 #4c93b5 Not used
wunderautomation_email_text_lighter_20 #525252 Lighter text, used in table details.
wunderautomation_email_text_lighter_40 #949494 Lighter 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 structure with the style tag inserted in the head tag. To make this easier, WunderAutomation offers a special placeholder [WASTYLE]:

img

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:

img

img

Read more about how to customize WooCommerce email settings here.