用 WooCommerce 3 中选择的变化价格替换可变价格范围

Question

在 WooCommerce 上，我想更改可变单一产品页面布局。因为当你有一个可变产品时，你会在可变产品页面中看到这个有线价格（在产品标题下方），它也会显示在商店页面中。

对我来说，标准方法是在商店和产品页面中显示产品的最低价格，并根据用户选择的变量更改该价格。我不敢相信为什么。

我可以使用此代码片段删除价格范围并显示最低价格。

https://businessbloomer.com/disable-variable-product-price-range-woocommerce/

但话又说回来，最低价格不会根据选择的变量而改变。可变产品布局中再次有两个价格。这是我当前的可变产品页面布局

http://www.preorders.lk/product/beats-solo3-wireless-on-ear-headphones/

因此，任何人都可以帮助从可变产品页面中删除价格范围，并默认仅显示产品的一个最低价格（在产品标题下）。因此，价格应该根据产品所具有的变量而变化。最低价格也应该显示在商店页面中。

这是一个截图：

原文由 Shashika Nanayakkara 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2021 最终更新

适用于 WooCommerce 4+ 和 5+，适用于：

用 WooCommerce 4+ 中选择的变化价格替换可变价格范围

---

更新 （2017 年 12 月） ： 为了避免，某些主题中有关非可变产品的问题和某些主题中的重复可用性错误

注意： 某些插件（如德国市场或某些主题） 无法 使用此代码，因为它们会在挂钩或 html 结构中进行自己的更改。

这是完全可能的。

1. 首先，我们删除不需要的价格。

2. 我们输出没有价格范围的可变价格并显示最低价格。

3. 我们在一个隐藏的容器中复制这个可变价格（由我们的 jQuery 脚本使用/读取）

4. 然后我们隐藏所选变化价格的容器（和库存可用性）

5. 在我们的 jQuery 脚本的帮助下，当我们得到选择的变化价格时，我们替换可变价格（并显示库存可用性）。

6. 如果客户更改变体，我们会更新价格…如果在该更改过程中未显示变体价格，则会显示我们的可变价格

这是代码：

 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>';
}

代码进入您的活动子主题（或主题）的任何 php 文件或任何插件 php 文件。

此代码经过测试并适用于 WooCommerce 3.2.x （也应该适用于 WooCommerce 2.6.x）

您可以选择将 CSS ( <style></style> ) 移动到 styles.css 您的活动子主题（或活动主题）的文件，然后将其从此功能中删除……

---

有关的：

• 移动 WooCommerce 中的变体价格位置

原文由 LoicTheAztec 发布，翻译遵循 CC BY-SA 4.0 许可协议