如何在WooCommerce中添加商品到购物车后隐藏/移除加入购物车按钮

需求概述 #

需实现：单商品页面点击"Buy Now"（原加入购物车）按钮完成加购后，隐藏该按钮，且不影响商品价格、数量控件及各类商品类型（简单、可变、分组等）的正常功能。目前已完成商店页按钮跳转、按钮文字修改、短描述区添加结账表单、首页清空购物车等自定义设置。

已使用的主题与插件 #

• Astra Theme 免费版
• Snippets code Plugin
• Custom CSS and JavaScript Plugin
• Microthemer Plugin

已完成的自定义修改 #

1. 商店页面加入购物车按钮重定向 #

将按钮文字改为"View product"并跳转至单商品页面：

add_filter( 'woocommerce_loop_add_to_cart_link', 'replacing_add_to_cart_button', 10, 2 );
function replacing_add_to_cart_button( $button, $product  ) {
    $button_text = __("View product", "woocommerce");
    $button = '<a class="button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';

    return $button;
}

2. 修改加入购物车按钮文字 #

将单商品页和商品归档页的"Add to cart"改为"Buy Now"：

// 修改单商品页加购按钮文字
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_custom_single_add_to_cart_text' ); 
function woocommerce_custom_single_add_to_cart_text() {
    return __( 'Buy Now', 'woocommerce' );
}

// 修改商品归档页加购按钮文字
add_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_custom_product_add_to_cart_text' );  
function woocommerce_custom_product_add_to_cart_text() {
    return __( 'Buy Now', 'woocommerce' );
}

3. 短描述区添加结账表单 #

在商品短描述后追加WooCommerce结账表单：

add_filter('woocommerce_short_description','ts_add_text_short_descr');

function ts_add_text_short_descr($description){
  $text="[woocommerce_checkout]";
    
  return $description.$text;
}

4. 首页进入时清空购物车 #

用户访问首页（商店页面）时自动清空购物车：

/* 用户进入首页时清空购物车 */
add_action( 'init', 'woocommerce_clear_cart_url' );
function woocommerce_clear_cart_url() {
global $woocommerce;

if ($_SERVER['REQUEST_URI'] === '/') { 
    $woocommerce->cart->empty_cart(); 
 }
}

解决方案：添加商品后隐藏Buy Now按钮 #

方法1：PHP条件判断控制按钮渲染 #

通过检查购物车中是否存在当前商品，动态移除按钮的渲染逻辑，适用于所有商品类型。将以下代码添加到Snippets插件中：

add_action( 'woocommerce_single_product_summary', 'hide_add_to_cart_button_if_in_cart', 1 );
function hide_add_to_cart_button_if_in_cart() {
    global $product;
    
    $product_id = $product->get_id();
    
    // 遍历购物车检查当前商品是否已存在
    foreach( WC()->cart->get_cart() as $cart_item ) {
        if( $cart_item['product_id'] === $product_id ) {
            // 移除单商品页的加购按钮区域
            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
            break;
        }
    }
}

方法2：JavaScript动态隐藏（适配AJAX加购场景） #

针对支持AJAX无刷新加购的商品，通过监听加购事件实现按钮隐藏，同时页面加载时自动检查购物车状态。

步骤1：添加JS代码到Custom CSS and JavaScript插件的JS区域

jQuery(document).ready(function($) {
    // 监听加购成功事件，隐藏按钮
    $(document.body).on('added_to_cart', function() {
        $('.single_add_to_cart_button').hide();
    });
    
    // 页面加载时检查购物车，若当前商品已在购物车则隐藏按钮
    var productId = $('input[name="add-to-cart"]').val();
    if(productId) {
        $.ajax({
            url: wc_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'check_product_in_cart',
                product_id: productId
            },
            success: function(response) {
                if(response == '1') {
                    $('.single_add_to_cart_button').hide();
                }
            }
        });
    }
});

步骤2：添加PHP后台处理函数到Snippets插件

add_action('wp_ajax_check_product_in_cart', 'check_product_in_cart');
add_action('wp_ajax_nopriv_check_product_in_cart', 'check_product_in_cart');
function check_product_in_cart() {
    $product_id = intval($_POST['product_id']);
    $in_cart = false;
    
    foreach( WC()->cart->get_cart() as $cart_item ) {
        if($cart_item['product_id'] == $product_id) {
            $in_cart = true;
            break;
        }
    }
    
    echo $in_cart ? '1' : '0';
    wp_die();
}

注意事项 #

• 两种方法可按需选择：PHP方法兼容性强，适配所有商品类型；JS方法更适合AJAX加购的无刷新场景；
• 测试时需覆盖简单、可变、分组等各类商品，确认价格、数量控件不受影响；
• 若Astra主题自定义了按钮类名，需调整JS中的选择器.single_add_to_cart_button为实际类名。

内容的提问来源于stack exchange，提问作者Hatem Frere