Sending HTML emails

Two ways to send HTML emails

WunderAutomation has two built-in actions that support 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 third-party functionality that might be in place to send outbound emails.

Send HTML emails (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 placing 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 a 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 configurations 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.