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

Question

In Woocommerce, I am using Woocommerce Waitlist plugin that shows a "Join Waitlist" button, near the "Add to Cart" button when product is out of stock. On my variable subscriptions, I have tried to hide the "Add to cart" button block when the product is out of stock, without success.

We are using the Vantage theme and Woocommerce subscriptions , if it can help.

How to hide the "Add to Cart" block when variable product is out of stock in Woocommerce?

Answer 1

Updated - To detect "out of stock" selected variation and hide add to cart button block, the way is to use 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
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

---

The CSS way (not convenient)

As the <div> container get a tag class woocommerce-variation-add-to-cart-disabled that grey out the add to cart button you could use a CSS rule to hide the entire block the button and the quantity field:

.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.

Answer 2

Note: I don't know where your waitlist plugin adds its buttons, so if it adds them to the cart form then they will get hidden too, so this won't work.

Two Points:

1: Set Allow back-orders? on each product to Do not allow. This will stop Woocommerce from displaying the add to cart button. You do have to do this for each individual product, but it can be done using Bulk Edit.

2: Hide the add to cart form using CSS. Something like this will target all products which are not in stock:

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

Hope that help to you