Get selected variation price in jQuery on Woocommerce Variable products

Question

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( 'woocommerce_before_add_to_cart_quantity', 'func_option_valgt' );
function func_option_valgt() {

    global $product;
    global $woocommerce;

    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.

Answer 1

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( 'woocommerce_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!

Answer 2

Updated code to update the class showing the select var price..

add_action( 'woocommerce_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 = '&pound;'
                    // SET YOUR CURRANCY SYMBOL ABOVE
                    $(".availability").html(csymbol+vprice);
                }
            });
        });
        </script>
        <?php
    }
}

Answer 3

With the following revisited code you will get in your jQuery script the price from the variation ID:

add_action( 'woocommerce_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.