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

Question

我在 WooCommerce 中有产品，有变体。如果所有变体都缺货，我想将“添加到购物车”按钮文本更改为“售罄”，并在变体为 select 之前编辑按钮的 CSS（更改其颜色）在下拉列表中编辑...

这是一个场景：

我转到可变产品单页。该产品有 4 个变体：

当前：显示“添加到购物车”按钮（变灰），可以在 select 编辑变体之前单击它。将出现一个警告，告诉用户 select 一个变体。当我 select 下拉列表中的一个变体时，如果该变体缺货，该按钮将显示为灰色。如果所有 4 个变体都缺货，页面的初始加载仍然显示“添加到购物车”按钮变灰，点击后显示 select 一个变体。

我想要什么：如果至少有一种变体仍有库存，标准的 WooCommerce 功能将保留（添加到购物车可见，单击时弹出警报以告诉他们 select 一种变体）。如果没有库存，“添加到购物车”按钮会立即显示“已售罄”，并显示为灰色。（之前我select一个变体）。

我发现的问题是，当从下拉列表中 select 编辑变体时，所有现有的代码都会更改添加到购物车按钮文本。我不知何故需要检查是否有任何变体有货（在 selected 之前），然后如果所有变体都缺货，则将按钮文本更改为“售罄”，或者先保留它仅在缺货变体为 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;
}

这会更改按钮文本，但只有在 select 编辑了变体时 - 我需要检查是否所有变体都缺货，然后立即更改文本。

Answer 1

当所有变体都缺货时，以下代码将为可变产品显示一个非活动的灰色 "sold out" 按钮：

// 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 文件。已测试并有效。

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

Display a Sold out greyed button if all variations are out of stock in WooCommerce

php

wordpress

woocommerce

product

variations