WooCommerce 3 で価格範囲を選択したバリエーション価格に置き換える方法は?

WooCommerce 3 で変数価格範囲を選択した変動価格に置き換えます

問題:

WooCommerce 3 の可変商品ページ商品タイトルの下に見苦しい価格帯がレイアウトされています。これは、特にバリエーションを選択した後も変更されない場合、混乱を招き、有益ではない可能性があります。

解決策:

価格範囲を選択したバリエーションの価格に置き換えて、それを保証します。それに応じて更新します:

1. 不要なものを削除価格:

   remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

2. 範囲なしの変数価格を挿入し、最低価格を表示します:

   add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 );

3. 変数価格を非表示にコピーしますコンテナ:

   echo '<div class="hidden-variable-price">' . $price . '</div>';</p>
   <li>
   <p><strong>選択したバリエーションの価格と在庫状況を非表示にする:</strong></p>
   <pre class="brush:php;toolbar:false">div.woocommerce-variation-price,
   div.woocommerce-variation-availability {
       height: 0px !important;
       overflow: hidden;
       line-height: 0px !important;
       font-size: 0% !important;
   }

4. jQuery を使用して更新する価格:

   $('select').blur(function() {
       if ($('input.variation_id').val()) {
           $('p.availability').remove();
           $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">' + $('div.woocommerce-variation-availability').html() + '</p>');
       } else {
           $('p.price').html($('div.hidden-variable-price').html());
           if ($('p.availability')) {
               $('p.availability').remove();
           }
       }
   });

追加メモ:

• このソリューションはテストされており、WooCommerce 3.2.x と互換性があります。以前のバージョン。
• 必要に応じて、CSS コードをテーマのstyles.cssファイル。
• 一部のプラグインまたはテーマは、このコードと互換性がない可能性があります。

以上がWooCommerce 3 で価格範囲を選択したバリエーション価格に置き換える方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。