Bagaimana untuk Menggantikan Julat Harga dengan Harga Variasi Terpilih dalam WooCommerce 3?

Ganti Julat Harga Boleh Ubah dengan Harga Variasi Terpilih dalam WooCommerce 3

Masalah:

Pada WooCommerce 3, reka letak halaman produk berubah-ubah termasuk julat harga yang tidak sedap dipandang di bawah tajuk produk. Ini boleh mengelirukan dan tidak bermaklumat, terutamanya apabila ia kekal tidak berubah selepas memilih variasi.

Penyelesaian:

Untuk menggantikan julat harga dengan harga variasi yang dipilih dan memastikannya kemas kini dengan sewajarnya:

1. Alih keluar yang Tidak Diingini Harga:

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

2. Masukkan Harga Boleh Ubah tanpa Julat dan Tunjukkan Harga Terendah:

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

3. Salin Harga Boleh Ubah menjadi Tersembunyi Bekas:

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

4. Sembunyikan Variasi Harga dan Ketersediaan:

   div.woocommerce-variation-price,
   div.woocommerce-variation-availability {
       height: 0px !important;
       overflow: hidden;
       line-height: 0px !important;
       font-size: 0% !important;
   }

5. Gunakan jQuery untuk Mengemas kini Harga:

   $('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();
           }
       }
   });

Nota Tambahan:

• Penyelesaian ini diuji dan serasi dengan WooCommerce 3.2.x dan versi terdahulu.
• Anda boleh mengalihkan kod CSS ke dalam tema anda secara pilihan fail styles.css.
• Sesetengah pemalam atau tema mungkin tidak serasi dengan kod ini.

Atas ialah kandungan terperinci Bagaimana untuk Menggantikan Julat Harga dengan Harga Variasi Terpilih dalam WooCommerce 3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!