如何在 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>';

將可變價格複製到隱藏的容器：

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

隱藏所選版本價格和可用性：

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

使用jQuery更新價格：

• 附加說明：
• 此解決方案經過測試並與WooCommerce 3.2.和相容早期版本。

您可以選擇將 CSS 程式碼移到主題的styles.css 檔案。 某些外掛程式或主題可能與此程式碼不相容。

以上是如何在 WooCommerce 3 中將價格範圍替換為所選的變動價格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！