How do I use the variation id to find the variations price using javascript? This is what I've got so far. I've got the variations ID, but i can't figure it out. I've been googling it for hours.
add_action( 'woomerce_before_add_to_cart_quantity', 'func_option_valgt' );
function func_option_valgt() {
global $product;
global $woomerce;
if ( $product->is_type('variable') ) {
?>
<script>
jQuery(document).ready(function($) {
$('input').change( function(){
if( '' != $('input.variation_id').val() ) {
var var_id = $('input.variation_id').val();
var var_length = $('#cfwc-title-field').val(); //LENGTH
var var_diameter =$('#diameter').val(); //DIAMETER
alert('Du valgte variant #' + var_id + " Lengde: " + var_length + " Diameter: " + var_diameter + " Variantpris: " + var_variant_pris);
}
});
});
</script>
<?php
}
}
Any help appreciated.
How do I use the variation id to find the variations price using javascript? This is what I've got so far. I've got the variations ID, but i can't figure it out. I've been googling it for hours.
add_action( 'woomerce_before_add_to_cart_quantity', 'func_option_valgt' );
function func_option_valgt() {
global $product;
global $woomerce;
if ( $product->is_type('variable') ) {
?>
<script>
jQuery(document).ready(function($) {
$('input').change( function(){
if( '' != $('input.variation_id').val() ) {
var var_id = $('input.variation_id').val();
var var_length = $('#cfwc-title-field').val(); //LENGTH
var var_diameter =$('#diameter').val(); //DIAMETER
alert('Du valgte variant #' + var_id + " Lengde: " + var_length + " Diameter: " + var_diameter + " Variantpris: " + var_variant_pris);
}
});
});
</script>
<?php
}
}
Any help appreciated.
Share Improve this question edited Oct 1, 2024 at 6:27 LoicTheAztec 254k24 gold badges396 silver badges443 bronze badges asked Feb 28, 2019 at 13:05 PaudunPaudun 2871 gold badge7 silver badges15 bronze badges 3- I guess you need this: woomerce.github.io/woomerce-rest-api-docs/#introduction then make an AJAX/fetch call for the info you need. – user5734311 Commented Feb 28, 2019 at 13:18
- I see there is an attribute called 'price' associated with product variants in the link you provided. Isn't it possible to just write something like var variation_price = $('variation_id.price').val(); or something? – Paudun Commented Feb 28, 2019 at 14:15
- 1 Ajax is not required for that… You just need to pass the array of variation Id / Price pairs to jQuery, to get the selected variation price. check it in the answer below – LoicTheAztec Commented Feb 28, 2019 at 15:17
3 Answers
Reset to default 10With the following revisited code you will get in your jQuery script the price from the variation ID:
add_action( 'woomerce_before_add_to_cart_quantity', 'func_option_valgt' );
function func_option_valgt() {
global $product;
if ( $product->is_type('variable') ) {
$variations_data =[]; // Initializing
// Loop through variations data
foreach($product->get_available_variations() as $variation ) {
// Set for each variation ID the corresponding price in the data array (to be used in jQuery)
$variations_data[$variation['variation_id']] = $variation['display_price'];
}
?>
<script>
jQuery(function($) {
var jsonData = <?php echo json_encode($variations_data); ?>,
inputVID = 'input.variation_id';
$('input').change( function(){
if( '' != $(inputVID).val() ) {
var vid = $(inputVID).val(), // VARIATION ID
length = $('#cfwc-title-field').val(), // LENGTH
diameter = $('#diameter').val(), // DIAMETER
vprice = ''; // Initilizing
// Loop through variation IDs / Prices pairs
$.each( jsonData, function( index, price ) {
if( index == $(inputVID).val() ) {
vprice = price; // The right variation price
}
});
alert('variation Id: '+vid+' | Lengde: '+length+' | Diameter: '+diameter+' | Variantpris: '+vprice);
}
});
});
</script>
<?php
}
}
Code goes on function.php file of your active child theme (or active theme). Tested and works.
Updated code to update the class showing the select var price..
add_action( 'woomerce_before_add_to_cart_quantity', 'func_option_valgt' );
function func_option_valgt() {
global $product;
if ( $product->is_type('variable') ) {
$variations_data =[]; // Initializing
// Loop through variations data
foreach($product->get_available_variations() as $variation ) {
// Set for each variation ID the corresponding price in the data array (to be used in jQuery)
$variations_data[$variation['variation_id']] = $variation['display_price'];
}
?>
<script>
jQuery(function($) {
var jsonData = <?php echo json_encode($variations_data); ?>,
inputVID = 'input.variation_id';
$('input').change( function(){
if( '' != $(inputVID).val() ) {
var vid = $(inputVID).val(), // VARIATION ID
length = $('#cfwc-title-field').val(), // LENGTH
diameter = $('#diameter').val(), // DIAMETER
vprice = ''; // Initilizing
// Loop through variation IDs / Prices pairs
$.each( jsonData, function( index, price ) {
if( index == $(inputVID).val() ) {
vprice = price; // The right variation price
}
});
//alert('variation Id: '+vid+' | Lengde: '+length+' | Diameter: '+diameter+' | Variantpris: '+vprice);
// Update the need class to show price
var csymbol = '£'
// SET YOUR CURRANCY SYMBOL ABOVE
$(".availability").html(csymbol+vprice);
}
});
});
</script>
<?php
}
}Get selected variation price on select change
In my case I need to get the price when the user select on one of the options from the select HTML tag.
add_action( 'woomerce_before_add_to_cart_quantity', 'get_price_on_select_change' );
function get_price_on_select_change() {
global $product;
if ( $product->is_type('variable') ) {
$variations_data =[]; // Initializing
// Loop through variations data
foreach($product->get_available_variations() as $variation ) {
$variations_data[$variation['variation_id']] = $variation['display_price'];
}
?>
<script>
const jsonData = <?php echo json_encode($variations_data);?>
document.addEventListener('DOMContentLoaded', () => {
const selectedVariationId = document.querySelector('.variation_id')
const select = document.querySelector('#pa_pack-size');
select.addEventListener('change', () => {
setTimeout(() => {
alert(jsonData[selectedVariationId.value])
},50)
})
})
</script>
<?php
}
}The setTimeout function is to add a short delay, just enough time to update the .variation_id input value.
Tested and it works!
PS: Thank you @LoicTheAztec for the idea!