There are a ton of social media sharing plugins for WordPress. Unfortunately, not all of them work very well with WooCommerce. With this recipe, we'll be installing a plugin and telling the plugin exactly where we want our social media icons so that they look nice on our product page.
The first part is installing the plugin. We'll be installing Jetpack, which is built and managed by WordPress.com. After we get it installed, we only need very minor tweaks to make it work well with WooCommerce.
- In the WordPress admin, click on the Plugins menu and then on Add New.
- Run a search for Jetpack by WordPress.com.
- Install and activate the plugin.
- In the WordPress admin, click on the newly created Jetpack menu and then on the Settings submenu.
- Enable the Sharing module.
- Now that it's enabled, you'll have to configure it. Scroll down to the same Sharing module, hover over it, and click on Configure.
At this point, you'll see a settings page with various options. The first step is to select which services you want listed on your site. You can pick as many as you like.
- Drag-and-drop services from Available Services to Enabled Services.
- Make sure the social media icons will be shown on the product pages.
- Click on Save Changes.
If you went to a product page on your site right now, you'd see the social media icons, but they're all the way at the bottom of the product page – even beneath the description and additional information tabs. With a bit of custom coding, we can put them exactly where we want them.
- Add the following code to your theme's
functions.phpfile, located underwp-content/themes/your-theme-name/, or your custom WooCommerce plugin:add_action( 'woocommerce_share', '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(); } }
All done! Load up your product page and see the social media icons right beneath the Add to cart button.
The Jetpack plugin handles social media sharing and icons. The code we wrote moves the output from Jetpack to exactly where we want it to be.
The first part of the code adds extra functionality on the WooCommerce product page. Within that code, we remove the old Jetpack output and print out new output. The elegant part of this code is that the Jetpack output only changes on the WooCommerce product pages. You could use the same social sharing functionality for your blog posts and the social sharing buttons will appear at the end of the post, which, of course, is controlled through Jetpack.