Patrick's Programming Blog

Adding Social Media Icons to WooCommerce Product Pages

Patrick Rauland
  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
  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
  5. Drag the services you want displayed on your site from Available Services to 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.

    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.

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.

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.

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

Exit mobile version