Once again this week we take a look at some of the WooCommerce customization I personally added to A Piece of Sicily, a Sicilian crafts and food marketplace I run together with my very-soon-to-be wife.

This week we take a look at the single product page. There are hundreds of social media share plugins, but I decided to go lightweight and simply embed the Twitter Share and Facebook Like buttons, so that I don’t need to worry about plugin updates, conflicts, etc. You can see the final result on one of my product pages, such as https://www.apieceofsicily.com/en/shop/sicilian-food/confetture-iddu-e-idda-e-arancella/

So, here’s how it’s done. Enjoy!

Here’s the final result: some handy social media share buttons on the WooCommerce product page, without using a plugin!

PHP Snippet: Add Twitter Share and Facebook Like Buttons @ WooCommerce Single Product Page

Note 1: you can go to https://publish.twitter.com/?buttonType=TweetButton&widget=Button and https://developers.facebook.com/docs/plugins/like-button/ respectively to generate your own HTML that you need to include in the snippet below.

Note 2: both social media platform give you some HTML for the frontend, and some JAVASCRIPT as well. You have to make sure you place these 2 in the correct places below.

 * @snippet       Social Media Buttons - WooCommerce Single Product Page
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/

add_action( 'woocommerce_single_product_summary', 'bbloomer_fb_twitter_single_product', 6 );

function bbloomer_fb_twitter_single_product() {

	echo '<div>';

   echo '<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-hashtags="apieceofsicily" data-related="apieceofsicily" data-show-count="false">Tweet</a>'; // GET THIS HTML FROM TWITTER DOCS LINK ABOVE

   echo '<div class="fb-like" data-href="' . get_permalink() . '" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="true"></div>'; // GET THIS HTML FROM FACEBOOK DOCS LINK ABOVE BUT KEEP THE get_permalink() PART

   echo '</div>';

add_action( 'wp_footer', 'bbloomer_twitter_facebook_js', 9999 );

function bbloomer_twitter_facebook_js() {

	if ( is_product() ) {

		echo '<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>'; // GET THIS HTML FROM TWITTER DOCS LINK ABOVE

		echo '<div id="fb-root"></div><script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0"></script>'; // GET THIS HTML FROM FACEBOOK DOCS LINK ABOVE


Leave a Reply