Mar 31, 2020 | WooCommerce

How to add social icons to WooCommerce emails?

Having the presence of your business at social networks helps to reach a wider audience and do better marketing. If you talk about marketing, primarily digital, then email marketing is an essential task. And if we combine these both, then your email marketing performs even better. Following this technique, many business owners embed social link icons in their newsletters to run effective campaigns. You may have noticed that some WooCommerce emails that you receive have social icons in them. And if you want to do the same, then inside this blog post, I’ll share with you the method of How to add social icons to WooCommerce emails. Before we move forward in this post, checkout our new Divi WooCommerce layouts pack.

Therefore, without taking a further minute, let’s get right to it.

Step 1: Add right code in the right file

To get social link icons in WooCommerce emails, first paste the below code in your child theme’s function file i.e., function.php

Step 2: Insert social media links

By default, above code add social media icons of Facebook, Twitter, LinkedIn, and Instagram to WooCommerce emails. Now, to send users to your social media accounts when they click on the icons. All you have to do is, insert your social media accounts’ link inside href attribute of the <a> tag, replacing the #. Same as the following example,

<li><a href=”https://www.facebook.com/diviextended/” target=”_blank”><i class=”fa fa-facebook” aria-hidden=”true”></i></a></li>

As you can see in the above example, I have replaced the # by the link i.e., https://www.facebook.com/diviextended/.

Step 3: Add more social media icons

If you want to add social media icons other than the icons available with the code. First copy the complete <li></li> tag from the above code, and paste it under the existing <li> tag code. Then, go to https://fontawesome.com/v4.7.0/icons/, and search your desired social media icon.

Pinterest social media icon font awesome

Then, choose your desired icon. As in the above image, I’ve searched for the Pinterest and selected its very first icon. Now, copy the code altogether with the <i> tag.

I tag to add social media icons inside WooCommerce emails

Now paste this code inside the <li> tag that you have copied before to replace the existing <i> tag. Thus, in return you’ll get the code as the following,

<li><a href=”#” target=”_blank”><i class=”fa fa-pinterest” aria-hidden=”true”></i></a></li>

After this, insert your social media link inside href attribute, replacing the #, same as below.

<li><a href=”https://in.pinterest.com/diviextended/” target=”_blank”><i class=”fa fa-pinterest” aria-hidden=”true”></i></a></li>

Then save changes, and you’ve successfully added social media links to your WooCommerce emails.

Summary

In this blog post, I’ve shown you how you can add social media icons to your WooCommerce emails. If this post was helpful to you, then please share it to help other users.

Also, we want to hear from you to know whether this method worked for you or not. Therefore, please share your views inside the comment section below. Or subscribe to our newsletter to stay updated with useful posts like this one. 

Posted By:
Karan
Karan loves making web beautiful with his keen eyes toward design.

1 Comment

  1. Aliz

    I pasted the code into the child theme’s function.php file. After I checked the wc emails I realised the social icons are not displaying properly. I only see a flat shape that is clickable, but definitely not reminds of the icons. The links are working. What could be the problem?

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment

  1. Aliz

    I pasted the code into the child theme’s function.php file. After I checked the wc emails I realised the social icons are not displaying properly. I only see a flat shape that is clickable, but definitely not reminds of the icons. The links are working. What could be the problem?

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to Create a Member Exclusive Blog Using Divi Conditions

How to Create a Member Exclusive Blog Using Divi Conditions

If you are a content creator, you understand the importance of providing valuable information to the audience. What will you do, if you want to share your valuable content with the registered members only? In that case, you can create a member-exclusive blog with the...

Why You Should Use Prebuilt Theme for a Website | 7 Key Benefits

Why You Should Use Prebuilt Theme for a Website | 7 Key Benefits

For one who wants to build websites easily and quickly, there's always a battle of choosing to work with developers or do it on their own. One creates a loop of hundreds of email exchanges, so another saves you from it — just you and your design ideas.  But how...

Divi Agency Child Theme to Present Your Enterprise

Divi Agency Child Theme to Present Your Enterprise

When you are using Divi to create your agency website on WordPress, you need a Divi agency child theme. This is a perfect solution with 5 modern Divi agency layouts to introduce your services, portfolio, contact, and other essential things about your company. Display...

Divi WooCommerce Extended

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Layouts Extended Divi Header Layouts