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 文件中,然后将其从该函数中删除……
相关: