如果 WooCommerce 中的所有变体都缺货，则显示已售罄的灰色按钮

Question

I have products in WooCommerce, with variations. If ALL variations are out of stock, I want to change the Add to Cart button text to say "Sold out" and edit the CSS of the button also (change it's color) BEFORE a variation is selected in the dropdown...

So here's a scenario:

I goto a variable product single page. The product has 4 variations:

CURRENTLY: The "add to cart" button displays (greyed out) and can be clicked before a variation is selected. An alert appears telling the user to select a variation. When I select a variation from dropdown, the button is greyed out if out of stock in that variation. If all 4 variations are out of stock, the initial load of the page still shows add to cart button greyed out and on click says to select a variation.

WHAT I WANT: If there is AT LEAST one variation still in stock, the standard WooCommerce functionality stays (Add To Cart visible, with alert popping up when clicked to tell them to select a variation). If NO variations are in stock, the Add to Cart button says "sold out" straight away, and is greyed out. (Before I select a variation).

The problem I'm finding is that all the existing code out there to change the add to cart button text is done when a variation is selected from the dropdown. I somehow need to check if ANY of the variations are in stock, (before they are selected) and then either change the button text to "sold out" if ALL variations are out of stock, or leave it at first load, and change the text only when the out of stock variation is selected.

I've tried the following code:

add_filter( 'woocommerce_product_add_to_cart_text', 
'customizing_add_to_cart_button_text', 10, 2 );
add_filter( 'woocommerce_product_single_add_to_cart_text', 
'customizing_add_to_cart_button_text', 10, 2 );
function customizing_add_to_cart_button_text( $button_text, $product ) {

    $sold_out = __( "Sold Out", "woocommerce" );

    $availability = $product->get_availability();
    $stock_status = $availability['class'];

    // Only for variable products on single product pages
    if ( $product->is_type('variable') && is_product() )
    {
    ?>
    <script>
    jQuery(document).ready(function($) {
        $('select').blur( function(){
            if( '' != $('input.variation_id').val() && $('p.stock').hasClass('out-of-stock') )
                $('button.single_add_to_cart_button').html('<?php echo $sold_out; ?>');
            else 
                $('button.single_add_to_cart_button').html('<?php echo $button_text; ?>');

            console.log($('input.variation_id').val());
        });
    });
    </script>
    <?php
    }
    // For all other cases (not a variable product on single product pages)
    elseif ( ! $product->is_type('variable') && ! is_product() ) 
    {
        if($stock_status == 'out-of-stock')
            $button_text = $sold_out.' ('.$stock_status.')';
        else
            $button_text.=' ('.$stock_status.')';
    }
    return $button_text;
}

This changes the buton text, but only when variations are selected - I need to check if all variations are out of stock and then change the text straight away.

Answer 1

The following code will display an inactive greyed "sold out" button for variable products, when all variations are out of stock:

// Single variable produccts pages - Sold out functionality
add_action( 'woocommerce_single_product_summary', 'replace_single_add_to_cart_button', 1 );
function replace_single_add_to_cart_button() {
    global $product;

    // For variable product types
    if( $product->is_type( 'variable' ) ) {
        $is_soldout = true;
        foreach( $product->get_available_variations() as $variation ){
            if( $variation['is_in_stock'] )
                $is_soldout = false;
        }
        if( $is_soldout ){
            remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
            add_action( 'woocommerce_single_variation', 'sold_out_button', 20 );
        }
    }
}

// The sold_out button replacement
function sold_out_button() {
    global $post, $product;

    ?>
    <div class="woocommerce-variation-add-to-cart variations_button">
        <?php
            do_action( 'woocommerce_before_add_to_cart_quantity' );

            woocommerce_quantity_input( array(
                'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
                'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
                'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( $_POST['quantity'] ) : $product->get_min_purchase_quantity(),
            ) );

            do_action( 'woocommerce_after_add_to_cart_quantity' );
        ?>
        <a class="single_sold_out_button button alt disabled wc-variation-is-unavailable"><?php _e( "Sold Out", "woocommerce" ); ?></a>
    </div>
    <?php
}

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