时间戳

首页 > 解决方案 > Wordpress - 在产品页面上添加社交按钮

php - Wordpress - 在产品页面上添加社交按钮

问题描述

我想将社交图标添加到我的产品页面上。即https://flowersforeveryone.co.za/product/cheerful-orange-tulips/ 在“添加到购物车”按钮下。

我设置了“社交菜单”。请问这个怎么加？

我的单一内容单一产品页面看起来像这样，但我不知道从哪里开始 -

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' ); ?>

标签： phpcsswordpresswoocommerce

解决方案

这是带有注释的完整代码：

// 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>
'
}

这里的CSS：

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

.my-custom-social i{
   margin-right:10px;
}

推荐阅读