WooCommer - Add social share buttons under the short description

functions.php

/**
 * 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="https://twitter.com/intent/tweet?status=<?php echo rawurlencode( $product_title ); ?>+<?php echo esc_url( $product_url ); ?>" target="_blank">
					<span class="fa fa-twitter"></span>
				</a>
			</li>
			<li class="facebook">
				<a href="https://www.facebook.com/sharer.php?u=<?php echo rawurlencode( esc_url( $product_url ) ); ?>" target="_blank">
					<span class="fa fa-facebook"></span>
				</a>
			</li>
			<li class="pinterest">
				<a href="https://www.pinterest.com/pin/create/button/?url=<?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>
				</a>
			</li>
			<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>
				</a>
			</li>
		</ul>
	</div>
<?php
}
add_action( 'woocommerce_share', 'woo_social_share_under_desc', 10 );

style.css

/*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 li.email a {
	background-color: #3fc387;
}