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 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.
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