用 WooCommerce 3 中选择的变化价格替换可变价格范围
Posted
技术标签:
【中文标题】用 WooCommerce 3 中选择的变化价格替换可变价格范围【英文标题】：Replace the Variable Price range by the chosen variation price in 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/
所以，任何人都可以帮助从可变产品页面中删除价格范围，并默认只显示产品的一个最低价格（在产品标题下）。因此，价格应该根据该产品所具有的变量而变化。最低价格也应该显示在商店页面中。
希望这很清楚。如果有任何不清楚的地方，请告诉我。详情请参考附图。
谢谢。
【问题讨论】：
【参考方案1】：2021 最终更新
适用于 WooCommerce 4+ 和 5+ 可在：
Replace the Variable Price range by the chosen variation price in WooCommerce 4+
更新（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文件中，然后将其从该函数中删除……
相关：
Move the variation price location in WooCommerce【讨论】：
感谢您非常明确的回答 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 改用这个版本：***.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;
【讨论】：
我应该使用什么来在存档或类别循环中显示它？以上是关于用 WooCommerce 3 中选择的变化价格替换可变价格范围的主要内容，如果未能解决你的问题，请参考以下文章
javascript 价格数量变化数量和价格woocommerce按价格改变价格
php WooCommerce：显示具有相同变化价格的可变产品的价格