Question

在WooCommerce上我想更改Variable单一产品页面布局。因为，当您拥有可变产品时，您会在“变量产品”页面中获得此有线价格（在产品标题下方），并且它也会显示在商店页面中。

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

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

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

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

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

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

希望这很清楚。如果有任何不清楚的地方，请告诉我。有关详细信息，请参阅附图。

感谢。

Answer 1

以下主题中的新改进更新（2018年6月）：

<强> Replace price range handling default variation displayed price in Woocommerce 3

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

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

这是完全可能的。

首先我们删除不需要的价格。
我们在没有价格范围的情况下输出可变价格并显示最低价格。
我们在隐藏容器中复制此变量价格（由我们的jQuery脚本使用/读取）
然后我们隐藏所选变化价格（和库存可用性）的容器
在 jQuery 脚本的帮助下，当我们获得所选的变体价格时，我们会替换变量价格（并显示库存可用性）。
如果客户更改了变化，我们会更新价格...如果在更改过程中未显示变化价格，则会显示我们的变量价格

以下是代码：

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文件中，然后将其从此函数中删除... < / p>

相关：

Move the variation price location in WooCommerce

Answer 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。

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

        }
    }
}

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

3 个答案: