当 Woocommerce 中的可变产品缺货时隐藏添加到购物车块答案

【问题标题】：Hide Add to cart block when a variable product is out of stock in Woocommerce当 Woocommerce 中的可变产品缺货时隐藏添加到购物车块
【发布时间】：2019-01-28 18:12:27
【问题描述】：

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

如果有帮助，我们正在使用 Vantage 主题和Woocommerce subscriptions。

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

【问题讨论】：

可以把添加按钮的模板的代码贴出来吗？你用的是什么主题？
这可能会让你开始stackoverflow.com/questions/44916965/…
@OhSoConfused - 谢谢，但这是针对零成本的商品，而不是缺货商品。

标签： php jquery css wordpress woocommerce

【解决方案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
}

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

CSS方式 （不方便）

由于<div> 容器有一个标记类woocommerce-variation-add-to-cart-disabled 使添加到购物车按钮变灰，您可以使用CSS 规则来隐藏整个块按钮和数量字段：

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

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

【讨论】：

如何添加自定义按钮或链接以防stok产品不足（将用户重定向到自定义表单）？
如何为所有类型的产品修改此代码，不仅可变而且简单，分组@LoicTheAztec

【解决方案2】：

注意：我不知道您的候补名单插件将其按钮添加到何处，因此如果将它们添加到购物车表单中，它们也会被隐藏，因此这不起作用。

两点：

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

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

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

希望对你有帮助

【讨论】：