如何在自定义WooCommerce店铺页面中根据缺货状态隐藏自定义加购按钮？

你之前的CSS只针对了缺货提示文本的.out-of-stock类，但自定义按钮本身没绑定这个类的关联规则。WooCommerce默认会给缺货的产品容器添加out-of-stock类，我们要利用这个容器类定位到自定义按钮，再设置隐藏规则。

步骤1：定位自定义按钮的CSS选择器 #

打开浏览器开发者工具（按F12），点击自定义加购按钮，查看它的HTML结构和专属类/ID。比如按钮代码可能是：

<button class="custom-add-to-cart-btn">加入购物车</button>

这里的.custom-add-to-cart-btn就是需要的选择器。

步骤2：编写针对性的CSS规则 #

结合产品容器的out-of-stock类，写出精准隐藏按钮的CSS：

/* 替换成你实际的按钮选择器 */
.woocommerce div.product.out-of-stock .custom-add-to-cart-btn {
    display: none !important;
}

• .product.out-of-stock确保只针对缺货的产品容器，.custom-add-to-cart-btn替换成你找到的实际按钮类即可。
• 加!important是为了覆盖按钮本身可能存在的冲突显示样式。

特殊情况：产品容器无out-of-stock类 #

如果你的主题没给缺货产品容器自动加out-of-stock类，在主题的functions.php文件里添加以下PHP代码手动添加：

add_filter('post_class', 'add_out_of_stock_class_to_product_container');
function add_out_of_stock_class_to_product_container($classes) {
    global $product;
    if (is_product() && isset($product) && !$product->is_in_stock()) {
        $classes[] = 'out-of-stock';
    }
    return $classes;
}

添加后再用上面的CSS规则就能生效。

验证效果 #

刷新产品详情页，产品缺货时自定义加购按钮会自动隐藏。

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