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
- In your WordPress admin add the Jetpack by Automattic plugin to your site
- Hover over the newly created Jetpack icon and click on Settings
- 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.
- After activating the service hover over it and press the Configure link
- Drag the services you want displayed on your site from Available Services to Enabled Services
Drag services from Available to Enabled
- 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
- 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
Pretty cool. How do you make this update proof, so it does not get lost with the next update of WooCommerce?
Hi Stephan,
The only way you could lose this customization is if you put the code snippet in a theme and then later update that theme. To work around this you could put it in a custom plugin or in your child theme’s functions.php file.
How can I add under feature image
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.
Hi There 🙂
How do I do this? Ive got jet pack on and sharing working but just not sure how or where to put the code?
Here’s a beginners guide to adding code to your
functions.phpfile.I hope that helps! 🙂
A true gentleman, thank you 🙂
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_sharehook 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_formaction. Changeadd_action( ‘woocommerce_share’, ‘patricks_woocommerce_social_share_icons’, 10 );toadd_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!
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 partwoocommerce_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! 🙂
How do you add the social icons after the short description and before the add to price?
I tried changing it to
woocommerce_short_descriptionandwoocommerce_after_short_descriptionbut 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..[…] 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 […]
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! 🙂
Hi Patrick,
Thanks so much for sharing this. My product pages look much better now!
They do look pretty. 🙂 So happy to hear it!
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.
Perfect solution – thanks! Btw I used the “Functionality” plugin to help me edit functions.php and it worked perfectly. 🙂
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.
Holy Crap thank you so much!! Saved me so much time!! Bookmarked for future reference. Life saver 🙂
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 thePost Commentbutton?Checkout the MailChimp for WordPress Lite plugin.
Thanks man, worked a treat!
Thanks a lot for the post. Really looking forward to reading more.
Thanks Patick,
That helps a lot 🙂
Is i also possible to install this into the footer (like a widget)?
You can customize WordPress to do anything you want. For something like this you’d want to pay a developer to build it for you. Look into Codeable.
Thanks for this awesome post. Saved alot of time 🙂
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
Very nice! It works. Many thanks 🙂
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.
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.
You rock!! Thank you for taking the time to share this.
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.
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?
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
I’m not sure why that happened – but this functionality was just added to Jetpack. I believe that the functionality will be released this week.
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
Can you share which woocommerce product you developed. Please create theme check wordpress plugin from the startup
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.