选择变体时，Woocommerce自定义可用性文本会多次显示 [英] Woocommerce custom availability text shown multiple times when selecting variations

问题描述

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

I'm experiencing the following bug on a clients WooCommerce website. We use this free Variations Swatch for Woocommerce plugin. I have a variable product with 4 different colors.

如果所有颜色都售罄，则在选择一个变体时会显示缺货"自定义消息.结果，但是，选择的不同变化再次显示该消息时，所以现在有2块用缺货"自定义消息:

If all colors are sold out, when selecting a variation the "out of stock" custom message is shown.
But when selecting a different variation the message is shown again, so there are now 2 blocks with "out of stock" custom message:

我在这家商店有另一种产品，颜色和引擎各不相同，没有这样的问题.

I have a different product in this store with color and engine variations and there's no issue like this.

问题:
如何使缺货的自定义消息仅一次显示一次?

Question:
How can I make the out of stock custom message to be shown only once at the same time?

这是该产品的网站 实时链接 页面，可以看到问题所在.

Here is the website live link to the product page, where the issue can be seen.

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

This is my code in the functions.php file of my theme:

// 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 [phone]', 'woocommerce');
    }
    return $availability;
}

推荐答案

更新:我已经更改了您的代码:

Update: I have changed in your code:

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

收件人:

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

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

Avoiding repetitive malformed html <p> and </p> tags…

并更改:

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

为了这个更好的人:

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

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

I have simplified the code in your wcs_custom_get_availability() function too…

因此正确的代码应为:

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 [phone]', '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文件或任何插件文件中.

经过测试，可以正常工作……这应该可以解决您的问题.

Tested and work … This should solve your issue.

这篇关于选择变体时，Woocommerce自定义可用性文本会多次显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！