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="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 );
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; }
All PHP snippets should be added via a child theme's functions.php file.