Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – WordPress – Add social buttons on Products Page

I want to add the social icons onto my product page. i.e https://flowersforeveryone.co.za/product/cheerful-orange-tulips/
just under the ‘Add to Cart’ button.

I have a ‘social menu’ set up. How do I add this please?

My single content-single-product page looks like this, but i don’t know where to start – 

defined( 'ABSPATH' ) || exit;

/**
 * Hook: woocommerce_before_single_product.
 *
 * @hooked wc_print_notices - 10
 */
do_action( 'woocommerce_before_single_product' );

if ( post_password_required() ) {
    echo get_the_password_form(); // WPCS: XSS ok.
    return;
}
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class(); ?>>

    <?php
        /**
         * Hook: woocommerce_before_single_product_summary.
         *
         * @hooked woocommerce_show_product_sale_flash - 10
         * @hooked woocommerce_show_product_images - 20
         */
        do_action( 'woocommerce_before_single_product_summary' );
    ?>

    <div class="summary entry-summary">
        <?php
            /**
             * Hook: woocommerce_single_product_summary.
             *
             * @hooked woocommerce_template_single_title - 5
             * @hooked woocommerce_template_single_rating - 10
             * @hooked woocommerce_template_single_price - 10
             * @hooked woocommerce_template_single_excerpt - 20
             * @hooked woocommerce_template_single_add_to_cart - 30
             * @hooked woocommerce_template_single_meta - 40
             * @hooked woocommerce_template_single_sharing - 50
             * @hooked WC_Structured_Data::generate_product_data() - 60
             */
            do_action( 'woocommerce_single_product_summary' );
        ?>
    </div>

    <?php
        /**
         * Hook: woocommerce_after_single_product_summary.
         *
         * @hooked woocommerce_output_product_data_tabs - 10
         * @hooked woocommerce_upsell_display - 15
         * @hooked woocommerce_output_related_products - 20
         */
        do_action( 'woocommerce_after_single_product_summary' );
    ?>
</div>

<?php do_action( 'woocommerce_after_single_product' ); ?>
Tags:

2

Answers


  1. 0

    see this line <?php wc_get_template_part( 'content', 'single-product' ); ?>

    Meand that there is a template page here /woocommerce/content-single-product.php

    You need to open that page, depend on your template you can find directly what you want or another inclusion like that.

    update

    Try to use hook to do what you want, put this in your theme function.php:

    add_action('woocommerce_after_add_to_cart_button','my_social_btn');
function my_social_btn() {
    echo '<a href="#" class="social fb">share on FB</a><a href="#" class="social tw">share on TW</a>';
}
    Login or Signup to reply.
  2. 0

    Here the complete code with comments:

    // get current url
global $wp;
$current_url = home_url( add_query_arg( array(), $wp->request ) );

// add action with variabile in url to share
add_action('woocommerce_after_add_to_cart_button','my_social_btn');
function my_social_btn() {
  echo '<div class="my-custom-social">
  <a href="https://www.facebook.com/sharer/sharer.php?u='.$current_url.'" class="social fb"><i class="fa fa-facebook-f"></i></a>
  <a href="https://twitter.com/intent/tweet?url='.$current_url.'" class="social tw"><i class="fa fa-twitter"></i></a>
</div>
'
}

    Here the css:

    .my-custom-social{
    display:flex;
    font-size:25px;
    float:none;
    margin-top:60px;
}

.my-custom-social i{
   margin-right:10px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search