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 Get tutoraspire.com FREE
* @author Tutor Aspire
* @compatible WooCommerce 5
* @donate $9 https://tutoraspire.com
*/
add_action( 'woocommerce_single_product_summary', 'tutoraspire_fb_twitter_single_product', 6 );
function tutoraspire_fb_twitter_single_product() {
echo '';
echo 'Tweet'; // GET THIS HTML FROM TWITTER DOCS LINK ABOVE
echo ''; // GET THIS HTML FROM FACEBOOK DOCS LINK ABOVE BUT KEEP THE get_permalink() PART
echo '';
}
add_action( 'wp_footer', 'tutoraspire_twitter_facebook_js', 9999 );
function tutoraspire_twitter_facebook_js() {
if ( is_product() ) {
echo ''; // GET THIS HTML FROM TWITTER DOCS LINK ABOVE
echo ''; // GET THIS HTML FROM FACEBOOK DOCS LINK ABOVE
}
}