How to add Social Icons to WooCommerce Order Emails

by

Introduction

Take advantage of every opportunity to increase customer engagement by including social media links on your WooCommerce order notification emails. Adding links to the footer of WooCommerce emails is as easy as editing a template. There are only a few steps, which we will go into detail about next.

  1. Make a copy of the email-header.php and email-footer.php template files from the WooCommerce plugin inside your child theme;
  2. Modify the email-footer.php file by adding an HTML table and social media links;
  3. Modify the email-header.php file to add styling for the table containing your social media links.

Step 1. Copy the email-header.php and email-footer.php template files to your Child Theme

To overwrite any template in WooCommerce, first find it in the WooCommerce plugin’s “templates” directory and copy it over into the child theme. For this tutorial, we will be copying the email-header.php and email-footer.php files. These files will be found here:

…/wp-content/plugins/woocommerce/templates/emails/

The proper way to place WooCommerce templates into a child theme is by creating a new directory in the child theme named woocommerce and mimicking WooCommerce’s directory structure. In this tutorial, the WooCommerce directory setup in the child theme will look like this:

…/wp-content/themes/your-child-theme/woocommerce/emails/

Once the proper directory structure has been created, copy the email-header.php and email-footer.php template files inside the emails directory.

Step 2. Modify the email-footer.php file in the Child Theme

Once the aforementioned file structure has been created, the site is ready to accept customizations to the email template. To add social media links, start by opening up email-footer.php in a text editor, adding an HTML table, and placing links to social media inside that table.

Since this template is going to be used for HTML emails, it is critical to take advantage of table HTML and inline styles wherever possible. WEBDOGS recommends the following table HTML:

<div class="email-footer"><!-- Start Custom Email Footer -->
<table border="0" cellpadding="10" cellspacing="0" width="100%" style="table-layout: fixed; text-align: center;">
<tbody>
<tr>
<td><a target="_blank" href="http://facebook.com/your-handle">Facebook</a></td>
<td><a target="_blank" href="http://twitter.com/your-handle">Twitter</a></td>
<td><a target="_blank" href="http://www.youtube.com/your-handle">YouTube</a></td>
<td><a target="_blank" href="http://google.com/+your-handle">Google+</a></td>
<td><a target="_blank" href="http://instagram.com/your-handle">Instagram</a></td>
</tr>
</tbody>
</table>
</div> <!-- End Custom Email Footer -->

Place the table HTML below this line of code found in email-footer.php in the child theme:

<?php echo wpautop( wp_kses_post( wptexturize( apply_filters( 'woocommerce_email_footer_text', get_option( 'woocommerce_email_footer_text' ) ) ) ) );?>

While this is a sample of what’s possible, what specifically gets added is limited only by imagination. Once the table is in place, add social icons, helpful links, promotions, or any other priority content desired to appear in the WooCommerce email footer.

Step 3. Modify the email-header.php File in the Child Theme

Sometimes inline styles may be ineffective, which is why it is still possible to use global styling in the <head> tag. The only thing we will being doing inside of email-header.php is some basic styling, I.E. making social media links sized at 16px.

Start by opening up email-header.php in an editor and navigating to the <head> tag. As with any webpage, you will be placing your styles within the <head> tags, but this time you will put <style> tags directly in the <head> as opposed to referencing them in a different file. For this example, the following code placed in the <head> tags will target the social media links we added earlier to email-footer.php:

<style>
.email-footer a {
font-size: 16px;
}
</style>

It is worth mentioning that WooCommerce will try to turn the styles in the <head> tags into inline styles where it may apply; This means you should always double-check and test your changes to make sure you are presenting your email footer content as intended. At WEBDOGS, we prefer to use the WooCommerce Email Test plugin to preview our changes.