用 WooCommerce 3 中选择的变化价格替换可变价格范围 [英] Replace the Variable Price range by the chosen variation price in WooCommerce 3

问题描述

在 WooCommerce 上，我想更改可变单一产品页面布局.因为，当您拥有可变产品时，您会在可变产品页面中获得此有线价格范围(在产品标题下方)，并且它也会显示在商店页面中.

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

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

解决方案

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 );函数 move_variations_single_price(){全球 $product, $post;如果($product->is_type('变量')){//删除可变产品的变化价格remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);//更改位置并插入变体价格add_action('woocommerce_single_product_summary', 'replace_variation_single_price', 10);}}函数replace_variation_single_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] );//销售价格$prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );排序($价格)；$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 = ''.$促销价.$product->get_price_suffix() .'</del><ins>'.$价格.$product->get_price_suffix() .'</ins>';}?><风格>div.woocommerce-variation-price,div.woocommerce-variation-availability,div.hidden-variable-price {高度:0px！重要；溢出:隐藏；位置:相对；行高: 0px !important;字体大小:0%！重要；}</风格><脚本>jQuery(document).ready(function($) {$('选择').blur(函数(){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());} 别的 {$('p.price').html($('div.hidden-variable-price').html());if($('p.availability'))$('p.availability').remove();console.log('NULL');}});});<?phpecho '<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 中移动变化价格位置

On WooCommerce I would like to change the Variable single product page layout. Because, when you have an variable product you get this wired price rage ( below product title ) in the Variable Product page and it shows in the shop page as well.

For me the standard way is to show the lowest price of the product in the shop as well as product page and change that price according to user selection of variables. I can't believe why.

I can remove the price range and show the lowest price using this code snippet.

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

But then again, that lowest price doesn't change according to select variables. There are again two prices in the variable product layout. This is my current variable product page layout

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

So, can anyone please help to remove the price range from the variable product page and show only one lowest price ( under the product title) of the product as default. So that price should be change according to the variables which that product have. And that lowest price should be show in the shop page as well.

Hope this is clear. Please let me know if anything is unclear. Please refer the attached image for more details.

Thanks.

解决方案

2021 definitive update

Works for WooCommerce 4+ and 5+ available on:

Replace the Variable Price range by the chosen variation price in WooCommerce 4+

---

Update (December 2017): to avoid, Problems regarding non variable products in some themes and a repetition availability bug in some themes

Note: Some plugins like the German Market or some themes will not work with this code, as they make their own changes in the hooks or in the html structure.

This is completely possible.

1. First we remove the unwanted price.
   
2. We output instead the variable price without the price range and show the lowest price.
   
3. We make a copy of this variable price in a hidden container (to be used/read by our jQuery script)
4. Then we hide the containers of chosen variation price (and the stock availability)
   
5. With the help of our jQuery script, when we get the chosen variation price, we replace the variable price (and display the stock availability).
6. If the customer change of variation we update the price... If the variation price is not displayed during that change process, our variable price is displayed

Here is that code:

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

Code goes in any php file of your active child theme (or theme) or also in any plugin php file.

This code is tested and works on WooCommerce 3.2.x (should work on WooCommerce 2.6.x too)

You can optionally move the CSS (<style></style>) to the styles.css file of your active child theme (or active theme) and then remove it from this function…

---

Related:

• Move the variation price location in WooCommerce

这篇关于用 WooCommerce 3 中选择的变化价格替换可变价格范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！