Top Navigation Menu

Add Social Share to Your Product Pages in WooCommerce

Add Share Buttons to Single Product Pages & Posts WooCommerce

If you use the widely popular Jetpack plugin for WordPress, adding social sharing buttons to your product pages and posts is very easy. However, the placement of the sharing buttons your product pages will by default be located at the end of your product description on the product tab. We will resolve this with a little code snippet you can place in your CHILD theme functions.php. If you don’t know how to create a child theme, it is very easy and you should view this child theme tutorial first before proceeding with this tutorial.

The end result of this social sharing button tutorial will result with a placement below your short description.

Add Social Share to Your Product Pages in WooCommerce

Setup Share Buttons in JetPack

1- To start with, if you have not installed Jetpack, go ahead and install it.

2- Once you have Jetpack installed proceed to Jetpack > Settings > Sharing.

3- Once you have located the sharing link, hover over it and you will see the link to “configure” the sharing. Go ahead and click on that link and the Share Settings page opens up and provides a few options.

4- Skip down past the Publicize to Sharing Buttons. There you can drag the sharing buttons from “Available Services” you want displayed on your product and post pages down direct below to “Enabled Services”. The example use in this tutorial uses Facebook, Indeed, Twitter, Reddit and Google +1. You choose what you want displayed.

5- Scroll down to “Button Style” and choose the style you want. This example uses icon only.

6 – Scroll down to “Show buttons on” and select where you want the buttons to appear. This example uses Posts & Products.

7- Don’t forget to save your changes!

Time for the Code Snippet

At this point you should have sharing buttons at the bottom of your posts and at the bottom of your product description located on the description tab. What we want to do is move the sharing buttons to be located under the short product description under the add to cart button. Simply add this code snippet to your child theme functions.php and you are done. The buttons will be moved similar to the picture above.

/***Rearrange Social Share Buttons Location***/  add_action( 'woocommerce_share', 'my_woocommerce_social_share_icons', 10 );    function my_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();        }    }   

Don’t forget to share this post!


No comments yet.

Leave a Reply