Question

我的产品页面很长。因此，我在页面上至少添加了三个带有ajax简码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;
}

我试图在“购买”按钮前添加一个选中标记，但这没有用。我尝试过：

.added

1）有没有办法将这三个“添加到购物车”按钮合成/链接在一起。因此，当单击第一个时，其他人也会显示对勾标记吗？我想问题是，第一个现在有一个不同的类，即.ajax_add_to_cart 其他两个只是from concurrent.futures import ThreadPoolExecutor

2）如何在.add 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 （您将在其中用产品ID替换 37 ）：

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文件中。经过测试，可以正常工作。

在Woocommerce单一产品上同步多个ajax购物车按钮

1 个答案: