问题：
根据在WooCommerce中选择的数量和选项显示可变产品的总价和总重量
张高澹
在WooCommerce最后一个版本中，我需要在产品页面上显示简短描述中选择的变化的重量，当您选择超过1个数量时，我想在添加到购物车按钮旁边显示总重量。
例如：我选择了4个数量。单位重量为4公斤。我需要显示：“总重量为16公斤”。
如果一般产品有重量，则此代码可以正常工作，但不适用于重量变化：
function woocommerce_total_product_price() {
global $woocommerce, $product;
// let's setup our divs
echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>', __('Totale Prodotto:','woocommerce'),'<span class="price">' . $product->get_price() . '</span>');
echo sprintf('<div id="product_total_weight" style="margin-bottom:20px;">%s %s</div>', __('Totale Peso:','woocommerce'),'<span class="weight">' . $product->get_weight() . '</span>');
?>
<script>
jQuery(function($) {
var price = <?php echo $product->get_price(); ?>,
currency = '<?php echo get_woocommerce_currency_symbol(); ?>';
var weight = <?php echo $product->get_weight(); ?>;
$('[name=quantity]').change(function() {
if (!(this.value < 1)) {
var product_total = parseFloat(price * this.value);
$('#product_total_price .price').html( currency + product_total.toFixed(2) );
var weight_total = parseFloat(weight * this.value);
$('#product_total_weight .weight').html( weight_total.toFixed(2) + ' kg');
}
});
});
</script>
<?php
}
add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 31 );
共有2个答案
蒋啸
我在我使用的主题中看到一个quantity_input.php文件，也许就是在这里，quantity input被重置了。
if ( $max_value && $min_value === $max_value ) {
?>
<div class="quantity hidden">
<input type="hidden" id="<?php echo esc_attr( $input_id ); ?>" class="qty" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $min_value ); ?>" />
</div>
<?php
} else {
/* translators: %s: Quantity. */
$labelledby = ! empty( $args['product_name'] ) ? sprintf( esc_html__( '%s quantity', 'essentials' ), strip_tags( $args['product_name'] ) ) : '';
?>
<div class="quantity mr-2 pix-px-10 bg-white rounded-lg shadow-sm d-inline-block">
<label class="screen-reader-text sr-only" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'essentials' ); ?></label>
<a href="#" class="minus d-inline-block text-body-default" >-</a>
<input
type="number"
id="<?php echo esc_attr( $input_id ); ?>"
class="input-text qty text form-control shadow-0 d-inline-block"
step="<?php echo esc_attr( $step ); ?>"
min="<?php echo esc_attr( $min_value ); ?>"
max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
name="<?php echo esc_attr( $input_name ); ?>"
value="<?php echo esc_attr( $input_value ); ?>"
title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'essentials' ); ?>"
size="4"
pattern="<?php echo esc_attr( $pattern ); ?>"
inputmode="<?php echo esc_attr( $inputmode ); ?>"
aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
<a href="#" class="plus d-inline-block text-body-default" >+</a>
</div>
<?php
}
我也有一个插件文件夹中的frontend.js文件：
jQuery（函数 ( $ ) {
if ( ywmmq.variations ) {
$( document ).on(
'found_variation',
function () {
var product_id = parseInt( $( '.single_variation_wrap .product_id, .single_variation_wrap input[name="product_id"]' ).val() ),
variation_id = parseInt( $( '.single_variation_wrap .variation_id, .single_variation_wrap input[name="variation_id"]' ).val() );
if ( ! isNaN( product_id ) && ! isNaN( variation_id ) ) {
get_variation_rules( product_id, variation_id );
}
}
);
}
function get_variation_rules( product_id, variation_id ) {
var container = $( '.ywmmq-rules-wrapper' ),
variations_form = $( '.single_variation_wrap' ),
raq_button = $( '.add-request-quote-button' );
if ( variations_form.is( '.processing' ) ) {
return false;
}
variations_form.addClass( 'processing' );
raq_button.addClass( 'disabled' );
variations_form.block(
{
message : null,
overlayCSS: {
background: '#fff',
opacity : 0.6
}
}
);
$.ajax(
{
type : 'POST',
url : ywmmq.ajax_url,
data : {
action : 'ywmmq_get_rules',
product_id : product_id,
variation_id: variation_id
},
success : function ( response ) {
if ( response.status === 'success' ) {
container.html( response.rules );
if ( parseInt( response.limits.max ) !== 0 ) {
$( '.single_variation_wrap .quantity input[name="quantity"]' ).attr( 'max', response.limits.max );
} else {
$( '.single_variation_wrap .quantity input[name="quantity"]' ).removeAttr( 'max' );
}
if ( parseInt( response.limits.min ) !== 0 ) {
$( '.single_variation_wrap .quantity input[name="quantity"]' ).attr( 'min', response.limits.min ).val( response.limits.min );
} else {
$( '.single_variation_wrap .quantity input[name="quantity"]' ).attr( 'min', 1 ).val( 1 );
}
if ( parseInt( response.limits.step ) !== 0 ) {
$( '.single_variation_wrap .quantity input[name="quantity"]' ).attr( 'step', response.limits.step );
} else {
$( '.single_variation_wrap .quantity input[name="quantity"]' ).attr( 'step', 1 ).val( 1 );
}
$( document ).trigger( 'ywmmq_additional_operations', [response.limits.min] );
} else {
container.html();
}
variations_form.removeClass( 'processing' ).unblock();
raq_button.removeClass( 'disabled' );
},
dataType: 'json'
}
);
return false;
}
$( document ).on(
'yith_wcpb_found_variation_after',
function ( event, form, variation ) {
if ( form.is( '.processing' ) ) {
return false;
}
form.addClass( 'processing' );
form.block(
{
message : null,
overlayCSS: {
background: '#fff',
opacity : 0.6
}
}
);
$.ajax(
{
type : 'POST',
url : ywmmq.ajax_url,
data : {
action : 'ywmmq_get_rules',
product_id : form.data( 'product_id' ),
variation_id: form.find( '.variation_id' ).val()
},
success : function ( response ) {
if ( response.status === 'success' ) {
if ( parseInt( response.limits.max ) !== 0 ) {
form.find( '.yith-wcpb-bundled-quantity' ).attr( 'max', response.limits.max );
} else {
form.find( '.yith-wcpb-bundled-quantity' ).removeAttr( 'max' );
}
if ( parseInt( response.limits.min ) !== 0 ) {
form.find( '.yith-wcpb-bundled-quantity' ).attr( 'min', response.limits.min ).val( response.limits.min );
} else {
form.find( '.yith-wcpb-bundled-quantity' ).attr( 'min', 1 ).val( 1 );
}
if ( parseInt( response.limits.step ) !== 0 ) {
form.find( '.yith-wcpb-bundled-quantity' ).attr( 'step', response.limits.step );
} else {
form.find( '.yith-wcpb-bundled-quantity' ).attr( 'step', 1 ).val( 1 );
}
}
form.removeClass( 'processing' ).unblock();
},
dataType: 'json'
}
);
}
)
}
);
商和颂
您可以创建一个javascript对象，该对象将包含基于产品类型的必要值。
这个想法是：
- 创建一个包含产品类型和其他必要字段（价格、货币和权重）的PHP数组；
- 将PHP数组转换为Javascript对象以在脚本中使用
- 基于产品的类型，获取产品的价格和重量（如果产品是可变的，则获取所选变化的值）
在上一个函数中，我使用变量段塞来确定选择了哪个选项。此方法仅在变量产品具有单个选择项时有效。
感谢@LoicTheAztec的回答，您可以在这里找到：
- 在单个页面中获取所选产品变体ID
我想我可以通过variation\u id类从隐藏的输入中获得所选变体id的值。
它现在还可以用于具有多个选择选项的可变产品。
我通过将函数一分为二来更改它。
>
第二个在页脚中添加脚本来处理更改的值。
因此：
// shows the total price and total weight based on the quantity entered
add_action( 'woocommerce_single_product_summary', 'show_total_price_and_total_weight_by_quantity', 31 );
function show_total_price_and_total_weight_by_quantity() {
// create the divs that will contain the total price and total weight
echo sprintf('<div id="product_total_price" style="display:none;margin-bottom:20px;">%s %s</div>', __('Totale Prodotto:','woocommerce'),'<span class="price"></span>');
echo sprintf('<div id="product_total_weight" style="display:none;margin-bottom:20px;">%s %s</div>', __('Totale Peso:','woocommerce'),'<span class="weight"></span>');
}
// change the total price and total weight based on the quantity entered
add_action( 'wp_footer', 'change_total_price_and_total_weight_by_quantity', 99 );
function change_total_price_and_total_weight_by_quantity() {
// only on the product page
if ( ! is_product() ) {
return;
}
global $product;
// initializes the array that will contain the product data
$product_data = array();
// do divs need to be shown?
$show = true;
// gets the currency and unit of weight
$currency = get_woocommerce_currency_symbol();
$weight_unit = get_option('woocommerce_weight_unit');
// if the product is simple
if ( $product->is_type( 'simple' ) ) {
// set the type of product
$product_data['type'] = 'simple';
// get simple product data
$product_data['price'] = $product->get_price();
$product_data['currency'] = $currency;
$product_data['weight'] = $product->get_weight();
$product_data['weight_unit'] = $weight_unit;
}
// if the product is variable
if ( $product->is_type( 'variable' ) ) {
// set the type of product
$product_data['type'] = 'variable';
// get the ids of the product variations
$variation_ids = $product->get_children();
foreach ( $variation_ids as $variation_id ) {
// gets the object of the variation product
$variation = wc_get_product( $variation_id );
// gets product variation data
$product_data['variation'][$variation_id]['price'] = $variation->get_price();
$product_data['variation'][$variation_id]['currency'] = $currency;
$product_data['variation'][$variation_id]['weight'] = $variation->get_weight();
$product_data['variation'][$variation_id]['weight_unit'] = $weight_unit;
}
// hides the div
$show = false;
}
// returns the JSON representation of a data
$product_data_json = json_encode( $product_data );
?>
<script>
jQuery(function($) {
// create a javascript object with product data
<?php
echo "var productData = ". $product_data_json . ";";
if ( $show ) {
?>
var product_total = parseFloat( productData.price * $('[name=quantity]').val());
$('#product_total_price .price').html( productData.currency + product_total.toFixed(2) );
var weight_total = parseFloat(productData.weight * $('[name=quantity]').val());
$('#product_total_weight .weight').html( weight_total.toFixed(2) + ' ' + productData.weight_unit);
$('#product_total_price').show();
$('#product_total_weight').show();
<?php
}
?>
// when the quantity is changed or a product option is selected
jQuery('[name=quantity], table.variations select').on('change',function(){
// shows data based on product type
switch( productData.type ) {
case 'simple':
// update the fields
var product_total = parseFloat(productData.price * $(this).val());
$('#product_total_price .price').html( productData.currency + product_total.toFixed(2) );
var weight_total = parseFloat(productData.weight * $(this).val());
$('#product_total_weight .weight').html( weight_total.toFixed(2) + ' ' + productData.weight_unit);
break;
case 'variable':
// gets the id variation based on the options chosen
var variation_id = $('input.variation_id').val();
// if the variation id is valid and the current option is different from "Choose an option"
if ( parseInt( $('input.variation_id').val() ) > 0 && $('input.variation_id').val() != '' && $(this).find('option').filter(':selected').val() != '' ) {
$('#product_total_price').show();
$('#product_total_weight').show();
// gets the object based on the selected variation
var obj = productData.variation[variation_id];
// update the fields
var product_total = parseFloat(obj.price * $(this).val());
$('#product_total_price .price').html( obj.currency + ' ' + product_total.toFixed(2) );
var weight_total = parseFloat(obj.weight * $(this).val());
$('#product_total_weight .weight').html( weight_total.toFixed(2) + ' ' + obj.weight_unit);
// otherwise it hides the divs
} else {
$('#product_total_price').hide();
$('#product_total_weight').hide();
}
break;
}
});
});
</script>
<?php
}
代码已经过测试并有效。将其添加到活动主题的functions.php.
类似资料：
-
WooCommerce将每个产品的总销量作为wp_postmeta表里，可以用get_post_meta获取，方法如下 在主题的functions.php中加入如下代码 //在shop页面显示总销量 add_action( 'woocommerce_after_shop_loop_item_title', 'wc_product_sold_count', 5 ); //在产品详情页面显示总销量 a
-
我正在建立一个电子商务网站。我的产品有点问题。 “添加到购物车”按钮对简单的产品效果很好，但对可变的产品不起作用。它给出了一个通知。 我到处找，在网上试了几条建议，但都不管用。所以我查看了WooCommerce源文件：。 在函数： 所以我尝试回声，和。它们都没有任何内容，因为当我回声时：它不会输出任何内容。 有什么建议吗？
-
我在我的WooCommerce 2.6.4商店上使用可变产品，我为同一产品的两种不同变体添加了不同的价格。当选择两个变体中的一个时，根本不显示任何价格。下面的div只是空的： 我希望预选的变异价格显示为默认，而非预选的变异价格应在选择时动态替换。几乎像这个演示，除了从一个预选的项目和价格应该显示为默认。
-
我的商店里的价格是带税显示的，我还使用{price_unclused_tax}后缀来显示不含税的价格。但可变产品存在一个问题。。。商店只显示含税价格（促销时显示原价），但不显示不含税价格。两种可变产品的价格相同。我尝试使用以下代码： https://tomjesch.com/display-woocommerce-products-with-and-without-tax/ 但它不能正常工作-它显
-
我正在创建一个WooCommerce商店，在那里我销售颜色/尺寸变化的产品。除此之外，我还使用WooCommerce产品附加组件，让用户输入一个将绣在他们产品上的名称。我整齐地输入所有的产品变化像这样： 在发布产品后，它没有显示任何价格。这怎么可能？产品如何在前端显示的屏幕截图： 我用于WooCommerce的插件和附加组件： WooCommerce产品插件 WooCommerce打印发票