/**
 *
 * This entire block is a mixture of 3 solutions. 2 found from web and a bit of custom css styling making it third.
 * Please read the code carefully for more comments.
 *
 * So for the first one (https://www.businessbloomer.com/woocommerce-get-currently-selected-variation-id/). There's a block of code that we want to run when a variation is changed for that first we must have an event trigger for a variation change. This just does that.
 *
 * @source          https://www.businessbloomer.com/woocommerce-get-currently-selected-variation-id/
 *
 * */

add_action( 'woocommerce_before_add_to_cart_quantity', 'bbloomer_display_dropdown_variation_add_cart' );

function bbloomer_display_dropdown_variation_add_cart() {

    global $product;

    if ( $product->is_type( 'variable' ) ) {

        ?>

        <style type="text/css">
            /* Don't do display none because we are accessing the value inside this dom node but the user don't need to see the price here. */
            .woocommerce-variation {
                visibility: hidden;
                height: 1px;
            }
        </style>

        <script>
            jQuery(document).ready(function ($) {

                $('input.variation_id').change(function () {
                    if ('' != $('input.variation_id').val()) {

                        var variationID = $('input.variation_id').val();

                        if (variationID) {
                            jQuery("#wccf_product_field_master_container").hide();


                            // Source: https://stackoverflow.com/questions/43617537/move-woocommerce-variation-price
                            // Update price according to variable price
                            if (jQuery('form.variations_form').length !== 0) {
                                var form = jQuery('form.variations_form');
                                var variable_product_price = '';
                                setInterval(function () {
                                    if (jQuery('.single_variation_wrap span.price span.amount').length !== 0) {
                                        if (jQuery('.single_variation_wrap span.price span.amount').text() !== variable_product_price) {
                                            variable_product_price = jQuery('.single_variation_wrap span.price span.amount').text();

                                            // jQuery('.single-product-summary p.price span.amount').text(variable_product_price);
                                            jQuery('#custom_variation_price').text(variable_product_price);
                                        }
                                    }
                                }, 500);
                            }

                        }

                    }
                });

            });
        </script>
        <?php

    }
}