Add Social Share Buttons Under the Short Description

 * Add social share buttons under the short description
function woo_social_share_under_desc() {

	// Vars
	$product_title 	= get_the_title();
	$product_url	= get_permalink();
	$product_img	= wp_get_attachment_url( get_post_thumbnail_id() ); ?>

    <div class="my-social-share clr">
		<ul class="clr">
			<li class="twitter">
				<a href="<?php echo rawurlencode( $product_title ); ?>+<?php echo esc_url( $product_url ); ?>" target="_blank">
					<span class="fa fa-twitter"></span>
			<li class="facebook">
				<a href="<?php echo rawurlencode( esc_url( $product_url ) ); ?>" target="_blank">
					<span class="fa fa-facebook"></span>
			<li class="pinterest">
				<a href="<?php echo rawurlencode( esc_url( $product_url ) ); ?>&media=<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>&description=<?php echo rawurlencode( $product_title ); ?>" target="_blank">
					<span class="fa fa-pinterest-p"></span>
			<li class="email">
				<a href="mailto:?subject=<?php echo rawurlencode( $product_title ); ?>&body=<?php echo esc_url( $product_url ); ?>" target="_blank">
					<span class="fa fa-envelope-o"></span>
add_action( 'woocommerce_share', 'woo_social_share_under_desc', 10 );

And the CSS code to add into the style.css file of your child theme:

.woocommerce div.product .my-social-share {
	display: block;
	margin-top: 15px; 
.woocommerce div.product .my-social-share ul {
	float: none;
.woocommerce div.product .my-social-share ul li {
	float: left;
	margin-right: 10px;
.woocommerce div.product .my-social-share ul li:last-child {
	margin-right: 0;
.woocommerce div.product .my-social-share ul li a {
	display: inline-block;
	font-size: 16px;
	line-height: 1.5;
	width: 40px;
	height: 40px;
	line-height: 40px;
	color: #fff;
	border-radius: 50%;
	text-align: center;
.woocommerce div.product .my-social-share ul li a:hover {
	opacity: 0.6;
.woocommerce div.product .my-social-share ul li.twitter a {
	background-color: #00aced;
.woocommerce div.product .my-social-share ul li.facebook a {
	background-color: #3b5998;
.woocommerce div.product .my-social-share ul li.pinterest a {
	background-color: #cb2027;
.woocommerce div.product .my-social-share ul a {
	background-color: #3fc387;

All PHP snippets should be added via a child theme's functions.php file.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.