Adding Social Media Icons to WooCommerce Product Pages

Batman on Telephone
  1. Blogging for Hippo
  2. Schedule Sales with WooCommerce
  3. The Problem with Focus
  4. Give Thanks
  5. Be Thankful for the People Who Inspire You
  6. Give Yourself Space
  7. Build Resources From Support
  8. How Hard Can Membership Be?
  9. Adding Social Media Icons to WooCommerce Product Pages
  10. How to Export WooCommerce Subscriptions
  11. Upgrade Your Contact Form With Ninja Forms
  12. Why I Write
  13. Blog Comments Policy
  14. Content Marketing Works – Even with Furnace Filters
  15. Making Email from Your Website More Reliable with Email Delivery Tools
  16. A Happiness Podcast?
  17. Podcast Compensation
  18. Wishlists Done Right
  19. Enable Free Shipping on a Per Product Basis
  20. Improve Your Writing with the Hemingway Editor
  21. Tell Users What You're Doing
  22. 2014 Business Review
  23. Mind Your Own Business
  24. Think Different to 10x Your Business
  25. Let Projects Die
  26. Maximize Your Creative Energy
  27. Use Git Bisect to Find Bugs in Your Codebase
  28. My Personal Value of Remote Work
  29. Don't Spam Email Receipts
  30. Make Your Own Luck
  31. Cold Showers and the Power of Challenges

You can find a gazillion social media sharing plugins for WordPress. Unfortunately not all of them work very well with WooCommerce. Some of them don't work at all, others put the icons in the wrong part of the page, or they put them on the page multiple times. As a store owner this can be a bit frustrating. Luckily one of my favorite plugins, Jetpack, has some pretty great social media sharing built it and with a little tweak we can make it look beautiful on product pages.

Adding Jetpack

The first step is adding Jetpack and turning on social sharing

  1. In your WordPress admin add the Jetpack by Automattic plugin to your site
  2. Hover over the newly created Jetpack icon and click on Settings
    Jetpack Settings
  3. You should see a big list of services available through the Jetpack plugin. You want to activate the Sharing service. Feel free to leave the rest as they are.
  4. After activating the service hover over it and press the Configure link
    Configure Jetpack Sharing
  5. Drag the services you want displayed on your site from Available Services to Enabled Services

    Jetpack Enabled Services

    Drag services from Available to Enabled

  6. Under the Show buttons on setting make sure you enable Products. I also like the sharing button on my blog posts so I'm going to check Posts as well.

    Jetpack Sharing Locations

    Choose on what types of pages you want to display the sharing icons

  7. Press the Save Changes button

At this point Jetpack will look beautiful on your posts and it will appear kind of awkwardly at the very bottom of the product page.

Sharing Icons Bottom Product Page

The sharing icons are totally hidden at the bottom of the product page. No one will find them there.

We can make this better. With a bit of code we can remove them from the bottom of the product page and move them up. You can add the following code to bottom of your theme's functions.php file or in a custom plugin.


add_action( 'woocommerce_share', 'patricks_woocommerce_social_share_icons', 10 );
function patricks_woocommerce_social_share_icons() {
if ( function_exists( 'sharing_display' ) ) {
remove_filter( 'the_content', 'sharing_display', 19 );
remove_filter( 'the_excerpt', 'sharing_display', 19 );
echo sharing_display();
}
}

Save that file, upload it, and take a look at the results. The sharing icons are in the middle of the page right beneath the product's short description. Now anyone can view the products and share it if they so choose.

Sharing Icons Middle Product Page

The sharing icons are now in the middle of the product page right after all of the essential information.

Happy sharing!

Update 2015/06/09: Video Walkthrough

Webucator made this great step by step video. Thanks for porting this to a new medium for people who prefer video to text. 🙂

Photo credit: Giphy

49 thoughts on “Adding Social Media Icons to WooCommerce Product Pages

  1. Pretty cool. How do you make this update proof, so it does not get lost with the next update of WooCommerce?

  2. Hi there! Love this looks nice. but need help. I can’t get it “up”.

    http://eatsweden.se/produkt/eatsweden-stockholm-2015/

    • What most likely happened is that your theme already moved the hooks around. Try this in Twenty Twelve or Storefront. If it works in those themes then the snippet is working fine there’s something going on with your theme in which case you should reach out to the theme developer.

      If you need help getting it to work with your theme I recommend Codeable. I interviewed their CEO.

  3. Hi There 🙂

    You can add the following code to bottom of your theme’s functions.php file or in a custom plugin.

    How do I do this? Ive got jet pack on and sharing working but just not sure how or where to put the code?

  4. I placed this code in a custom plugin and it works perfectly! Thank you so much for posting this trick! If you don’t mind me asking, is there an easy way to get the share buttons to display above all the essential information rather than below? Thank you!

    • It’s definitely possible. Instead of adding the action to the woocommerce_share hook you’d want to use a different hook. Where exactly did you want this?

      • Thank you so much for your reply! I would really like to be able to get the share buttons to display just after the “add to cart” function–between the “add to cart” and SKU information. That would be amazing 🙂

        • If you take a look through the WooCommerce template files you can see the different action.

          In this case you’ll want to use the woocommerce_after_add_to_cart_form action. Change add_action( ‘woocommerce_share’, ‘patricks_woocommerce_social_share_icons’, 10 ); to add_action( ‘woocommerce_after_add_to_cart_form’, ‘patricks_woocommerce_social_share_icons’, 10 );

          I hope that helps! 🙂

          • Thank you so much for your time and for your help. It didn’t work for me at first–I think because I don’t use the actual “add to cart” function maybe. I looked through the template files that you linked though and I found ‘woocommerce_product_meta_start’ and tried that. It is now working perfectly! Thank you!

  5. Exactly what I needed! Thank you for the amazing, detailed instructions. They worked like a charm.

    I was wondering, though, if you wouldn’t mind explaining/breaking down the code? I am a PHP noob.

    • Good question!

      The location is changed by this line add_action( ‘woocommerce_share’, ‘patricks_woocommerce_social_share_icons’, 10 );. Specifically this little part woocommerce_share. You could swap that out with any action in WooCommerce and that’s where it will appear. If you want to learn more about this you should take a look at the WordPress Plugin API. That explains exactly what an action and how to use them.

      I hope that helps! 🙂

  6. How do you add the social icons after the short description and before the add to price?

    I tried changing it to woocommerce_short_description and woocommerce_after_short_description but it only got rid of the description and added the buttons.

    • Hi Ferid,

      I changed the add_action line to add_action( ‘woocommerce_short_description’, ‘patricks_woocommerce_social_share_icons’, 10 ); and it worked for me. They showed up right after the short description and right before the add to cart buttons. If it’s not working for you you might have a theme that is already messing with the order. I’d use a service like Codeable to help you customize this..

  7. […] you’re using WooCommerce, you’ve got a few options. Check out this tutorial from Patrick Rauland on adding social sharing buttons to WooCommerce products with Jetpack. You can […]

  8. Hi There,
    This little trick worked perfectly for my client’s site! Thank you so much. The only problem I’m having is when I share the product it only shows up as a link, how can I get the product photo to be included when the item is shared? Thanks so much!!

    • Hi Candice! Good question! I tried this on my site and when you share on a page like Facebook it should crawl your page and find the most likely image. Your theme should be coded correctly so that Facebook pulls in the featured image on pages / posts and the product image on product pages. If it’s coded wrong then Facebook might be confused and guess wrong. Also make sure your images are big enough and square-ish. Also your site has to be publicly visible (not a test site) otherwise Facebook can’t crawl it.

      I hope that helps! 🙂

  9. Hi Patrick,

    Thanks so much for sharing this. My product pages look much better now!

  10. Hello,
    I tried to add this plugin, but it had it on the bottom and at the top above the header! I had someone move it to the middle, as you explained in your post, but he could not figure out how to correct the header portion of it. Any ideas? We ultimately removed it, but if you can make a suggestion to fix it, Ill try again. Thanks

    • Hi Brenda,

      If it’s showing up at the top where you want it but still showing up at the bottom then what’s most likely happening is that it’s already been moved by something else.

      It’s a bit hard to explain but my program will only remove that code at priority 19. If another plugin has already removed it at 19 and moved it to 20 then it will show up in just about the same place but my plugin won’t remove it because nothing is there.

      For small fixes like this I would just use a professional service to take care of it. I recommend Codeable (aff) that specialize in this sort of thing. Something like this will probably be like $25.

  11. Perfect solution – thanks! Btw I used the “Functionality” plugin to help me edit functions.php and it worked perfectly. 🙂

  12. Seriously great info. It seems basically impossible to find a plugin that does this quite as well as Jetpack with your code for Woocommerce. Thank you.

  13. Holy Crap thank you so much!! Saved me so much time!! Bookmarked for future reference. Life saver 🙂

  14. Very clean solution! I noticed however that the jetpack plugin currently requires a mandatory connect to wordpress.com. I don’t think I want to burden customers with another account requirement and using mine for it seems debatable 🙂

    Nevertheless, good article!

    PS: How did you enable the I want news about Patrick’s WooCommerce e-book! link under the Post Comment button?

  15. Thanks man, worked a treat!

  16. Thanks a lot for the post. Really looking forward to reading more.

  17. Thanks Patick,

    That helps a lot 🙂

  18. Is i also possible to install this into the footer (like a widget)?

  19. Thanks for this awesome post. Saved alot of time 🙂

  20. Very helpful article! Thank you!

    I can confirm this is working fine in WordPress 4.2.2 and a highly customized WooThemes Storefront 1.4.5.

    See it in action on product and blog pages on my site.

    Riley @ http://www.rileyshiery.com

  21. Very nice! It works. Many thanks 🙂

  22. Hi Patrick!

    How I can I get the social icons to show on each product individually in the shop page? Not just the single product page? I tried checking off Front Page, Archive Pages, and Search Results, Pages..(even posts and media just in case), but it didn’t work.

    • So you want a way to share each product page from the shop page? Some social media icons underneath each product?

      I don’t know of any plugins that do that. I’m sure you could do it with this plugin but would require customization. I always recommend Codeable.

  23. Hi,

    I would like the icons to appear like in your picture but what I get is a button that the visitor has to click in order to view the social icons.

    Any idea how I can get that fixed?

    • Are you sure you don’t have some sort of ad blocker or some other functionality that’s preventing this from working? Does it just happen with products or other pages as well?

      My snippet just moves the social media icons – it shouldn’t change their behavior in any way. I’d guess there’s another plugin or theme conflicting with Jetpack.

  24. You rock!! Thank you for taking the time to share this.

  25. Really nice article. Actually I was searching for social media sharing plugin for my wordpress blog and came across your site. Let me try out listed plugins one by one. So I can work around and choose one of best suitable for my blog.

  26. Works great on my wc store, but the share buttons don’t show on the shop page (which is also my home page). Is that an issue with this code, or a limitation of Jetpack’s share buttons. In either case, how can I get the share buttons on my shop page?

  27. Hi Rouland,
    Everything worked fine except when I tried adding some code I got from woo commerce cookbook, to make it appear just below add to cart. The code made the whole site vanish into thin air once added to function.php. Here is the code “add_action( ‘woocommerce_after_add_to_cart_form’, ‘woocommerce_cookbook_social_share_icons’, 10 );
    function woocommerce_cookbook_social_share_icons() {
    if ( function_exists( ‘sharing_display’ ) ) {
    remove_filter( ‘the_content’, ‘sharing_display’, 19 );
    remove_filter( ‘the_excerpt’, ‘sharing_display’, 19 );
    echo sharing_display();
    }
    }”

    Any idea why it happens

  28. Thanks a millionth times, no I take that back. You Rock, You’re a life saver. I don’t know how to say it. Gracias, gran Hermano

  29. Can you share which woocommerce product you developed. Please create theme check wordpress plugin from the startup

  30. Is there a way to modify the layout of the shared message for Facebook.. It is set to fit to the width if the product image, but my product images are square so chops off the top and bottom.. I would like for it to try and fit the image better.

Leave a Reply

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.