如果 WooCommerce 中的所有變體都缺貨，則顯示已售罄的灰色按鈕

Question

我在 WooCommerce 中有產品，有變化。 如果所有變體都缺貨，我想將“添加到購物車”按鈕文本更改為“售罄”，並在下拉列表中選擇變體之前編輯按鈕的 CSS（更改其顏色）...

所以這是一個場景：

我轉到可變產品單頁。 該產品有 4 個變體：

當前：“添加到購物車”按鈕顯示（變灰）並且可以在選擇變體之前單擊。 會出現一個提醒，告訴用戶選擇一個變體。 當我從下拉列表中選擇一個變體時，如果該變體中缺貨，該按鈕將顯示為灰色。 如果所有 4 個變體都缺貨，頁面的初始加載仍然顯示添加到購物車按鈕為灰色，點擊時表示選擇一個變體。

我想要什么：如果庫存中至少有一個變體，則標准的 WooCommerce 功能將保持不變（添加到購物車可見，單擊時會彈出警告以告訴他們選擇變體）。 如果庫存中沒有任何變體，“添加到購物車”按鈕會立即顯示“售罄”，並且顯示為灰色。 （在我選擇一個變體之前）。

我發現的問題是，當從下拉列表中選擇一個變體時，所有用於更改添加到購物車按鈕文本的現有代碼都已完成。 我以某種方式需要檢查是否有任何變體有庫存（在選擇它們之前），然后如果所有變體都缺貨，則將按鈕文本更改為“售罄”，或者在第一次加載時將其保留，然后更改text only when the out of stock variation is selected.

我試過以下代碼：

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

這改變了Buton文本，但只有在選擇變體時 - 我需要檢查所有變體是否缺貨，然后立即更改文本。

Answer 1

當所有變體都缺貨時，以下代碼將為可變產品顯示一個非活動的灰色“售罄”按鈕：

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

代碼位於活動子主題（或活動主題）的 function.php 文件中。 測試和工作。