WooCommerce の可変商品ページに価格帯の代わりに選択したバリエーションの価格を表示するにはどうすればよいですか?

WooCommerce 3 で可変価格範囲を選択したバリエーション価格に置き換えます

WooCommerce では、可変商品ページに価格範囲が表示されます単一価格の代わりに。これは一部の製品では便利ですが、他の場合には望ましくない場合もあります。この記事では、価格範囲を選択したバリエーション価格に置き換えて、利用可能な最低価格のみが表示されるようにするソリューションを提供します。

これを実現するには、カスタム PHP 関数と jQuery スクリプトを使用します。 PHP 関数はデフォルトの価格範囲を削除し、プレースホルダー価格に置き換えます。 jQuery スクリプトは、バリエーションが選択されると、選択されたバリエーションの価格でプレースホルダーの価格を更新します。

これを処理するコードは次のとおりです:

add_action( 'woocommerce_before_single_product', 'move_variations_single_price', 1 );
function move_variations_single_price(){
    global $product, $post;

    if ( $product->is_type( 'variable' ) ) {
        // removing the variations price for variable products
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

        // Change location and inserting back the variations price
        add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 );
    }
}

function replace_variation_single_price(){
    global $product;

    // Main Price
    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %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>';
}

コードは次の場所に配置できます。子テーマまたはテーマのfunctions.phpファイル内の任意のPHPファイル。テーマを更新するときにカスタマイズが失われないように、子テーマを使用することをお勧めします。

コードを追加すると、可変商品ページには価格帯ではなく利用可能な最低価格が表示されます。バリエーションが選択されると、選択したバリエーションの価格を反映するように価格が更新されます。

このソリューションは WooCommerce 3 以降と互換性があります。変動する価格範囲を選択したバリエーションの価格に置き換え、顧客が選択した製品バリエーションの明確かつ正確な価格を確認できるようにします。

以上がWooCommerce の可変商品ページに価格帯の代わりに選択したバリエーションの価格を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。