I've searched a lot to find the right code for updating the price for variations on the product page when the quantity selector is changed. I've found the code and it works (see code below). However I would now need to show the "from price" (lowest price of variations) before any variations are selected. Here is an example for such code: WooCommerce variable products: keep only "min" price with a custom label Unfortunately I don't get to combine the two. I'm sure that a lot of Woocommerce uses would also be interested in this. Thank your for help. Frank
// 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();
// 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;
}
// 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;
}
// 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) );
$('#product_total_price').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) );
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();
// 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) );
// otherwise it hides the divs
} else {
$('#product_total_price').hide();
}
break;
}
});
});
</script>
<?php
}