php - 当 Woocommerce 中的可变产品缺货时隐藏“添加到购物车” block

Question

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

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

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

Answer 1

更新 - 要检测“缺货”选定的变体并隐藏“添加到购物车”按钮 block ，方法是使用 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 规则来隐藏按钮和数量字段的整个 block :

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

But When no variations are selected it will also hide add to cart, so it's not convenient.