隐藏添加到购物车块，当可变产品在Woocommerce中缺货时

Question

在Woocommerce中，我正在使用Woocommerce候补名单插件，当产品缺货时，该插件会在"添加到购物车"按钮附近显示"加入候补名单"按钮。在我的变量订阅中，我试图在产品缺货时隐藏"添加到购物车"按钮块，但没有成功。

我们正在使用Vantage主题和Woocommerce订阅，如果它可以提供帮助的话。

当可变产品在Woocommerce中缺货时，如何隐藏"添加到购物车"块？

Answer 1

已更新- 要检测"缺货"选定的变体并隐藏添加到购物车按钮块，方法是使用 jQuery：

add_action( 'wp_footer', 'single_add_to_cart_event_text_replacement' );
function single_add_to_cart_event_text_replacement() {
global $product;
// Only single variable products
if( ! ( is_product() && $product->is_type('variable') ) )
return;
?>
<script type="text/javascript">
jQuery(function($){
var vs = 'table.variations select',         vi = 'input.variation_id',
atc = 'woocommerce-variation-add-to-cart',  atcd = atc+'-disabled',
atc = '.'+atc;
// 1. On start (With a mandatory light delay)
setTimeout(function(){
if ( 0 < $(vi).val() && $(atc).hasClass(atcd) ) {
$(atc).hide();
}
}, 250);
// 2. On variation change
$('.variations_form').on( 'blur', vs, function(){
if( 0 < $(vi).val() && $(atc).hasClass(atcd) ){
$(atc).hide();
} else {
$(atc).show();
}
});
})
</script>
<?php
}

代码进入函数.php活动子主题(或活动主题(的文件。经过测试并工作。

---

CSS方式(不方便(

当<div>容器获得一个标签类woocommerce-variation-add-to-cart-disabled该标签类灰显添加到购物车按钮时，您可以使用 CSS 规则隐藏整个块按钮和数量字段：

.woocommerce-variation-add-to-cart-disabled { display:none !important; }

但是当没有选择变体时，它也会隐藏添加到购物车，所以不方便。

Answer 2

注意：我不知道您的候补名单插件在哪里添加按钮，所以如果将它们添加到购物车表单中，那么它们也会被隐藏，所以这不起作用。

两点：

1：将每个产品上的"允许延期交货？"设置为"不允许"。这将阻止Woocommerce显示添加到购物车按钮。您必须为每个单独的产品执行此操作，但可以使用批量编辑来完成。

2：使用CSS隐藏添加到购物车表单。像这样的事情将针对所有没有库存的产品：

.type-product:not(.instock) form.cart {
display: none;
}

希望对您有所帮助

Answer 3

.type-product:not(.in-stock) form.cart {
display: none!important;
}

正确的类有库存，这仅适用于单个产品页面，不适用于存档或变体，因为当 1 为 OOS 时，它将隐藏所有变体！