在 Woocommerce 单品上同步多个 ajax 添加到购物车按钮

Question

我的产品页面很长。所以我在页面中添加了至少三个购买按钮，使用 ajax 短代码[add_to_cart id='123']

添加产品后，查看购物车链接将被删除

a.added_to_cart.wc-forward {
    display: none !important;
}

只有购买文本像以前一样显示

.add_to_cart_button.added  {
    display:  inline-block !important;
}

我尝试在“购买”按钮前添加一个复选标记，但没有成功。 我试过了：

a.ajax_add_to_cart:visited:before {
   content:  "\2713 " !important;
}

1) 有没有办法将这三个“添加到购物车”按钮同步/链接在一起。 那么，当第一个被点击时，其他的也会显示复选标记吗？ 我想问题是，第一个现在有一个不同的类，即.added 而另外两个只是.ajax_add_to_cart

2) 如何在 . added BUY 按钮前添加复选标记？

感谢任何帮助。

Answer 1

您可以使用 jQuery 同步所有添加到购物车按钮上的复选标记。

1) 按钮内的复选标记（在按钮文本之前）

CSS 规则：

a.added_to_cart.wc-forward {
    display: none !important;
}
.add_to_cart_button.added  {
    display:  inline-block !important;
}
.add_to_cart_button.added:before {
   content:  "\2713\00a0" !important;
}

PHP / jQuery （您将在其中将 37 替换为您的产品 ID）：

add_action('wp_footer', 'sync_multiple_add_to_cart_buttons' );
function sync_multiple_add_to_cart_buttons() {
    // Only on single product pages for a specific product
    if( is_product() && 37 == get_the_id() ) :
    ?>
    <script type="text/javascript">
    jQuery(function($){
        $(document.body).on('added_to_cart', function(){
            $('a.ajax_add_to_cart').each( function(){
                if( $(this).attr('data-product_id') == <?php echo get_the_id(); ?> && ! $(this).hasClass('added') )
                    $(this).addClass('added');
            });
        });
    });
    </script>
    <?php
    endif;
}

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

---

2) 按钮前的复选标记（使用fontawesome）

CSS 规则：

a.added_to_cart.wc-forward {
    display: none !important;
}
.add_to_cart_button.added  {
    display:  inline-block !important;
}

add_action('wp_footer', 'sync_multiple_add_to_cart_buttons' );
function sync_multiple_add_to_cart_buttons() {
    // Only on single product pages for a specific product
    if( is_product() && 37 == get_the_id() ) :
    ?>
    <script type="text/javascript">
    jQuery(function($){
        checkmark = '<i class="fas fa-check"></i>&nbsp;';
        $(document.body).on('added_to_cart', function(){
            $('a.ajax_add_to_cart').each( function(){
                if( $(this).attr('data-product_id') == <?php echo get_the_id(); ?> && ! $(this).hasClass('added') )
                    $(this).addClass('added').before(checkmark);
            });
        });
    });
    </script>
    <?php
    endif;
}

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。