如何在 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. 使用 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中文网其他相关文章！