Question

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

我们正在使用Vantage主题和Woocommerce subscriptions（如果有帮助的话）。

当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
}

代码进入您的活动子主题（或活动主题）的function.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;
}

希望对您有帮助

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

2 个答案: