选择变体时多次显示 Woocommerce 自定义可用性文本

Question

我在客户 WooCommerce 网站上遇到以下错误。我们使用这个免费的Variations Swatch for Woocommerce 插件。我有一个具有4 种不同颜色 的可变产品。

如果所有颜色均已售罄，则在选择变体时会显示“缺货”自定义消息。
但是选择不同的变体时，消息将再次显示，因此现在有2个块“缺货”自定义消息：

我在这家商店有不同的产品，颜色和引擎有变化，没有这样的问题。

问题：
如何让缺货自定义消息同时只显示一次？

这里是网站live link 到产品页面，在那里可以看到问题。

这是我在主题的functions.php 文件中的代码：

// Change location of
add_action( 'woocommerce_single_product_summary', 'custom_wc_template_single_price', 10 );

function custom_wc_template_single_price(){
global $product;

// Variable product only
if($product->is_type('variable')):

    // Main Price
    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( 'Ab: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    // Sale Price
    $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
    sort( $prices );
    $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    if ( $price !== $saleprice && $product->is_on_sale() ) {
        $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
    }

    ?>
    <style>
        div.woocommerce-variation-price,
        div.woocommerce-variation-availability,
        div.hidden-variable-price {
            height: 0px !important;
            overflow:hidden;
            position:relative;
            line-height: 0px !important;
            font-size: 0% !important;
        }
    </style>
    <script>
    jQuery(document).ready(function($) {
        $('select').blur( function(){
            if( '' != $('input.variation_id').val() ){
                if($('p.availability')) $('p.availability').remove();
                $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
                console.log($('input.variation_id').val());
            } else {
                $('p.price').html($('div.hidden-variable-price').html());
                if($('p.availability'))
                    $('p.availability').remove();
                console.log('NULL');
            }
        });
    });
    </script>
    <?php

    echo '<p class="price">'.$price.'</p>
    <div class="hidden-variable-price" >'.$price.'</div>';

endif;
}


// This filter for custom in stock and out of stock messages:

add_filter( 'woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2);
function wcs_custom_get_availability( $availability, $_product ) {


    // Change In Stock Text
    if ( $_product->is_in_stock() ) {
        $availability['availability'] = __('Dein Minimoto Produkt ist verfügbar!', 'woocommerce');
    }
    // Change Out of Stock Text
    if ( ! $_product->is_in_stock() ) {
        $availability['availability'] = __('Aktuell nicht vorrätig, bitte kontaktieren Sie uns telefonisch unter +49 403 486 2392', 'woocommerce');
    }
    return $availability;
}

Answer 1

更新：我已更改您的代码：

'<p class="availability">+$('div.woocommerce-variation-availability').html()+</p>' 

收件人：

'<div class="availability">+$('div.woocommerce-variation-availability').html()+</div>'

避免重复格式错误的 html <p> 和 </p> 标签…

并改变：

if($('p.availability')) $('p.availability').remove();

给这个更好的人：

if($('div.availability').html() != undefined ) $('div.availability').remove();

我也简化了 wcs_custom_get_availability() 函数中的代码……

所以正确的代码应该是：

add_filter( 'woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2);
function wcs_custom_get_availability( $availability, $product ) {

    // Change In Stock Text
    if ( $product->is_in_stock() )
        $availability['availability'] = __('Dein Minimoto Produkt ist verfügbar!', 'woocommerce');
    else
        $availability['availability'] = __('Aktuell nicht vorrätig, bitte kontaktieren Sie uns telefonisch unter +49 403 486 2392', 'woocommerce');

    return $availability;
}

// Change location of
add_action( 'woocommerce_single_product_summary', 'custom_wc_template_single_price', 10 );
function custom_wc_template_single_price(){
    global $product;

    // Variable product only
    if($product->is_type('variable')):

        // Main Price
        $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
        $price = $prices[0] !== $prices[1] ? sprintf( __( 'Ab: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

        // Sale Price
        $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
        sort( $prices );
        $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

        if ( $price !== $saleprice && $product->is_on_sale() ) {
            $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
        }

        ?>
        <style>
            div.woocommerce-variation-price,
            div.woocommerce-variation-availability,
            div.hidden-variable-price {
                height: 0px !important;
                overflow:hidden;
                position:relative;
                line-height: 0px !important;
                font-size: 0% !important;
            }
        </style>
        <script>
        jQuery(document).ready(function($) {
            $('select').blur( function(){
                var availability = '<div class="availability">'+$('div.woocommerce-variation-availability').html()+'</div>';
                if( '' != $('input.variation_id').val() ){
                    if($('div.availability').html() != undefined ) $('div.availability').remove(); // Just in case
                    $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append(availability);
                    console.log('IF - '+$('input.variation_id').val());
                } else {
                    $('p.price').html($('div.hidden-variable-price').html());
                    if($('div.availability').html() != undefined ) $('div.availability').remove();
                    console.log('ELSE');
                }
            });
        });
        </script>
        <?php

        echo '<p class="price">'.$price.'</p>
        <div class="hidden-variable-price" >'.$price.'</div>';

    endif;
}

代码进入您的活动子主题（或主题）的 function.php 文件或任何插件文件中。

测试和工作......这应该可以解决您的问题。

Answer 2

这一行告诉你一切

 $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');

你使用的是 append 而不是 html()

将您的代码更改为：

$('p.price').html($('div.woocommerce-variation-price > span.price').html()+'<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');