Elementor PRO/WooCommerce商品缺货时隐藏自定义按钮实现方法

你之前写的代码不生效，核心原因是woocommerce_before_add_to_cart_button这个钩子只有在渲染WooCommerce原生「加入购物车」按钮模块时才会触发。你用Elementor Pro搭建自定义商品详情页模板时，如果没有插入原生的加购按钮模块，这个钩子根本不会执行，里面写的隐藏按钮的CSS自然不会输出到页面上。

按稳定性和便捷度排序，选其中一种操作即可：

方案1：Elementor Pro原生设置（最推荐，零代码） #

• 进入Elementor Pro的商品详情页模板编辑界面，选中你添加的「立即预订」按钮
• 在左侧编辑面板切换到「高级」选项卡，找到动态可见性设置项
• 添加可见性规则：选择条件为「商品库存状态」，设置规则为「当商品有库存时可见」
• 保存模板后清空缓存测试即可，原生逻辑无兼容性问题。

方案2：纯CSS实现（最省事） #

WooCommerce会自动给缺货商品的页面<body>标签添加out-of-stock全局类，不需要写PHP判断，直接把下面这段代码加到「外观-自定义-额外CSS」里即可生效：

body.out-of-stock .reserve-button {
    display: none !important;
}

方案3：修正PHP代码逻辑 #

如果坚持用PHP输出样式，不要绑定加购按钮相关的钩子，换成全局页脚钩子保证代码能正常执行，代码如下，加到主题的functions.php或者代码片段插件里：

add_action( 'wp_footer', function() {
    // 仅在商品详情页执行逻辑
    if ( ! is_product() ) return;
    global $product;
    // 容错判断，避免非商品场景报错
    if ( ! $product || ! method_exists( $product, 'is_in_stock' ) ) return;
    // 缺货时输出隐藏按钮的样式
    if ( ! $product->is_in_stock() ) {
        echo '<style>.reserve-button { display: none !important; }</style>';
    }
});

注意：所有方案操作完都要清空页面缓存、CDN缓存再测试，避免缓存导致看不到效果。

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