如何在WooCommerce店铺页面循环内正确判断商品类型并替换加购按钮

问题分析 #

你遇到的报错Uncaught Error: Call to a member function is_type() on null，核心原因是在全局作用域直接调用$product->is_type()时，$product对象还未被初始化。店铺页面的商品循环是在模板加载阶段才逐个创建$product对象的，全局声明global $product无法提前获取到有效对象。

你的需求明确为：

• 移除简单商品在循环内的默认加购按钮
• 为简单商品在指定位置替换为单个加购按钮（与详情页样式一致）
• 可变商品保留原有循环加购按钮的属性选择功能

正确实现代码 #

// 控制循环加购按钮的显示：简单商品隐藏，可变商品保留
add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_loop_add_to_cart_display', 10, 2 );
function custom_loop_add_to_cart_display( $html, $product ) {
    // 简单商品：返回空字符串，隐藏默认循环加购按钮
    if ( $product->is_type( 'simple' ) ) {
        return '';
    }
    // 可变/其他商品：保留原有加购按钮输出
    return $html;
}

// 为简单商品在指定位置添加单个加购按钮
add_action( 'woocommerce_before_shop_loop_item_title', 'simple_product_custom_add_to_cart', 12 );
function simple_product_custom_add_to_cart() {
    global $product;
    
    // 确保商品对象存在且为简单商品
    if ( ! $product || ! $product->is_type( 'simple' ) ) {
        return;
    }
    
    // 输出详情页样式的单个加购按钮
    woocommerce_template_single_add_to_cart();
}

代码说明 #

1. 过滤器控制默认按钮显示：
   使用woocommerce_loop_add_to_cart_link过滤器，针对商品类型动态控制循环加购按钮的输出。简单商品返回空字符串直接隐藏默认按钮；可变商品保留原有按钮逻辑，不影响其属性选择功能。

2. 钩子添加自定义按钮：
   在woocommerce_before_shop_loop_item_title钩子（商品标题上方位置）中，先验证$product对象的有效性，再为简单商品输出详情页样式的加购按钮。这个钩子在每个商品循环内部触发，能确保$product对象已被正确初始化。

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