【问题标题】:Replace the Variable Price range by the chosen variation price in WooCommerce 3用 WooCommerce 3 中选择的变化价格替换可变价格范围
【发布时间】:2017-12-08 07:12:18
【问题描述】:

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

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

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

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

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

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

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

希望这很清楚。如果有任何不清楚的地方,请告诉我。详情请参考附图。

谢谢。

【问题讨论】:

    标签: php wordpress woocommerce product variations


    【解决方案1】:

    2021 最终更新

    适用于 WooCommerce 4+ 和 5+ 可在:

    Replace the Variable Price range by the chosen variation price in 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 (&lt;style&gt;&lt;/style&gt;) 移动到活动子主题(或活动主题)的 styles.css 文件中,然后将其从该函数中删除……


    相关:

    【讨论】:

    • 感谢您非常明确的回答 LoicTheAztec。我试过你的代码。但这就是我得到的
    • 感谢您非常明确的回答 LoicTheAztec。我试过你的代码。但这就是我得到的preorders.lk/product/beats-solo3-wireless-on-ear-headphones 并且商店页面仍然显示产品下的价格范围。这是我想要的方式。 prntscr.com/frs2zm我只想有一个价格应该在产品标题下。此外,如果没有折扣,那一个价格应该是它的最低价格。如果有折扣,则该价格低于应在产品页面和商店页面中默认显示的正常最低价格。
    • 非常感谢您的帮助。对此,我真的非常感激。我检查了你的链接,这正是我想要的。我真的很抱歉。我不是 PHP 专家。无论如何,我将您的代码添加到我的 chid-theme function.php 文件中。但是,布局有点混乱。您可以从这里查看 Loic。 preorders.lk/product/beats-solo3-wireless-on-ear-headphones 此外,当产品不可用时,(在此产品 Gloss Black 中),它显示为未定义。你可以看看你是否去我的链接 Loic。再次感谢您的帮助。
    • 当然。我现在就这样做。
    • @retroriff 改用这个版本:stackoverflow.com/questions/50704727/…
    【解决方案2】:

    聚会迟到了,但我正在寻找更动态/通用的解决方案和更少的代码,所以我调整了以下答案。

    价格根据variation-form triggers 更新,因此样式和原始 HTML 保持不变。

    add_action( 'woocommerce_before_single_product', 'move_variations_single_price', 1 );
    function move_variations_single_price(){
      global $product, $post;
      if ( $product->is_type( 'variable' ) ) {
        add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 );
      }
    }
    
    function replace_variation_single_price() {
      ?>
        <style>
          .woocommerce-variation-price {
            display: none;
          }
        </style>
        <script>
          jQuery(document).ready(function($) {
            var priceselector = '.product p.price';
            var originalprice = $(priceselector).html();
    
            $( document ).on('show_variation', function() {
              $(priceselector).html($('.single_variation .woocommerce-variation-price').html());
            });
            $( document ).on('hide_variation', function() {
              $(priceselector).html(originalprice);
            });
          });
        </script>
      <?php
    }
    

    使用 v4.0.1 成功测试。只要主题/插件不改变它应该工作的标记。如果没有,您可以轻松地相应地更改priceselector

    【讨论】:

    • 感谢 Luuk Skeur 这个解决方案,效果很好!虽然我有一个小问题。我在 Flatsometheme 上运行(如果这有什么不同的话)。问题是,当使用您的 sn-p 时,“" 会添加到价格之前。这在简单的产品上不存在。结果是价格和税收信息都显示得太大。有没有办法确保不添加 nimb.ws/vCfbU6
    • 嗨@TobiasBindemo,很高兴听到! :) 这个 sn-p 在某种程度上不会与 CSS 或 HTML 混淆,它只是将价格替换为 WooCommerce 生成的 variation-price。如果您想修改它,请使用一些自定义 CSS 或覆盖模板。
    • 这正是我所寻找的。谢谢!
    【解决方案3】:

    我知道我在这里复活了一个旧线程,但是我在使用此代码时发现的一点是,您需要注意,使用此代码,您可能会阻止单一、非可变价格显示在某些主题为:

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

    在所有产品页面上触发,无论它是否是可变产品。

    您可以使用以下版本,它只是在运行其余代码之前检查当前产品是否可变。

        add_action( 'woocommerce_before_single_product', 'check_if_variable_first' );
    function check_if_variable_first(){
        if ( is_product() ) {
            global $post;
            $product = wc_get_product( $post->ID );
            if ( $product->is_type( 'variable' ) ) {
                // removing the price of variable products
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
    
    // Change location of
    add_action( 'woocommerce_single_product_summary', 'custom_wc_template_single_price', 10 );
    function custom_wc_template_single_price(){
        global $product;
    
    // Variable product only
    if($product->is_type('variable')):
    
        // 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() ){
                    $('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>';
    
    endif;
    }
    
            }
        }
    }
    

    【讨论】:

    • 我应该使用什么来在存档或类别循环中显示它?
    猜你喜欢
    • 2018-11-15
    • 2020-03-13
    • 1970-01-01
    • 1970-01-01
    • 2019-05-29
    • 1970-01-01
    相关资源
    最近更新 更多