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!
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 businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 5
* @community https://businessbloomer.com/club/
*/
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
}
}
Thanks! I put it in woocommerce_after_add_to_cart_form. Works like a charm.
Nice
Thanks for sharing this. I would suggest to add additional debug button for admins to wipe caches.
Not sure I follow