Get selected variation price in jQuery on Woocommerce Variable products

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.

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.