php - 如果 WooCommerce 中的所有变体都缺货，则显示 Sold out 灰色按钮

问题描述

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

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

标签： phpwordpresswoocommerceproductvariations

当所有变体都缺货时，以下代码将为可变产品显示一个无效的灰色“售罄”按钮：

// 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 文件中。测试和工作。

php - 如果 WooCommerce 中的所有变体都缺货，则显示 Sold out 灰色按钮

问题描述

解决方案

推荐阅读