How to Add Social Sharing Icons to Woocommerce Product Pages

If you have ever tried adding social sharing functionality on woocommerce product page, you’ll agree with me that it’s always difficult placing it where users will have the most engagement.

This is so because virtually all the WordPress social media plugins rarely work properly with Woocommerce. It’s either the icons are positioned at the top or bottom of the page. These locations are not good for user experience neither would they produce the best engagement we desire as far as woocommerce product page is concern.

Remember, this page has a unique structure different from the normal blog page where these locations perform better in terms of exposure and accessibility.

The only exception is if the theme you use on your site has these sharing icons pre-configured at the best location on product page. But, most ecommerce theme developers do not incorporate this design functionality into their theme built as one of the top priorities.

Yeah! It’s really optional because it has been argued logically in some quarters that these sharing icons on product page have the tendency to distract online shoppers from moving to the next phase in the buying process.

Some hold the notion that it aid product visibility and endorsement as much as review does.

Well, whatever might be your opinion; you have a right to it. For us, we encountered this challenge when we were redesigning a site for one of our clients- Naijaside. So, I decided to share how we hacked the problem.

How we reposition social media icons on woocommerce product page using Jetpack plugin

We shall be using Jetpack plugin because it works properly with WordPress framework (Hooks). The first thing you’ll have to do is install and activate Jetpack plugin.

Check out this eBook if you find it hard or do not know how to install and activate plugin on your WordPress website.

Upon activation, go to your WP admin dashboard and look for Jetpack. Hover on it and click ‘Setting’. You’ll see a long list of available services.

NOTE: You have to unlock these services through your WordPress dot com account. In other words, you must have WordPress dot com account before you can use Jetpack services just as Akismet plugin.

Okay, scroll down to where you see social media services (Sharing). Activate it and then hover on it. Click on ‘Configure’.

On the configuration page, scroll down a little. You’ll see the available social sharing icons like Facebook, Twitter, Google Plus, LinkedIn, etc.

Select the ones you want to use by dragging and dropping them into the box provided just below. You also have the choice to re-order them the way you like through the same drag and drop effect.

You may either choose to show or not to show share count using button style box. Just play around the available customization options. What is most important is to go to the ‘Show button on’ setting and check the pages you want the button to show up.

Make sure you check ‘Products’ and if you so like you may include ‘Posts’. Don’t forget to include your twitter handle in the box against ‘Twitter site tag’. Scroll down and hit the ‘Save changes’ button.

You may watch the video version below by Webucator

The share icons re-position process

Up till this page, the icons would still show up on the product page but at the unwanted location (bottom). To move them up to a location just below the ‘Add to cart’ or ‘Buy’ button, you’ll have to use a code. Never mind it’s a very simple process.

Copy the code below and place it at the bottom of your active theme’s ‘function.php’ file. It’s better to do this via child theme so you don’t lose it when you update the theme.


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();
}
}

Courtesy: Patrick Programming of speaking in bytes

You can now go back and see your product page. You’ll discover that the sharing icons have moved to the location specified. It’s also possible to move around the position of these icons by altering the location module within the code.

Conclusion: You can see that even though it’s not really a big deal to add sharing icons to woocommerce product page, it can be pretty hard if you don’t know the hack to move it to the proper location where there would be maximum engagement.

What do you think? Should you have a better way to achieve this result, I’d love you to share it in the comment below.