Get the selected product variation ID in WooCommer

For my Woocommerce variable products I'm implementing a custom size chooser on the single product page and have this sizes in a table:

These variations are just: 30B 30C 30D rather than being split in to: 30 and B C D

What I am trying to figure out is: How to grab the shipping class for each product variations?

I have something similar on cart page but I don't know what is the variation ID or how to get it from the single product page:

$product_id = ( 0 != $cart_item['variation_id'] ) ? $cart_item['variation_id'] : $cart_item['product_id'];
// need the variation id for the above to be able to do the rest:

$product_shipping_classes = get_the_terms( $product_id, 'product_shipping_class' );
$product_shipping_class_name = ( $product_shipping_classes && ! is_wp_error( $product_shipping_classes ) ) ? current( $product_shipping_classes )->name : '';

I know how to do it once I have the variation ID. I just can't figure out how to get it in order to do the rest. The only things that I need to get for it, are the product id and the slug for the variations (there is also a color attribute on this page).

However I have given to the product a default variation to use (so the hidden variation_id is set).

Perhaps that needs to be fetched first to know the id of the selected color to then fetch the variation ids for the others?

In WooCommerce product single pages for variable products, you can't get the selected product variation in PHP as it's a live event (client side, not server side).

The way to do it is using JavaScript/jQuery to get it. As you don't provide any related code for this single product page regarding your variable products, is not possible for me to give you a real working code that will completely match your needs.

Get the selected variation ID on single product page for variable product (In this example I display the selected variation ID dynamically below add to cart button):

add_action( 'woocommerce_single_product_summary', 'single_product_variable_customization', 3, 0 );
function single_product_variable_customization() {
    global $product;

    // Only for variable products on single product pages
    if ( $product->is_type('variable') && is_product() ) {

    ##  ==>  ==>  Here goes your php code (if needed)  ==>  ==>  ##

    // Passing a variable to javascript
    $string1 = "The selected Variation ID is: ";
    $string2 = "No Variation ID is selected ";
    ?>
    <script>
    jQuery(document).ready(function($) {

        // Initializing
        var myText1 = '<?php echo $string1; ?>', myText2 = '<?php echo $string2; ?>';

        // Get and display the default variation ID after add-to-cart button (initialization)
        if( '' != $('input.variation_id').val() )
            $('div.woocommerce-variation-add-to-cart').after('<div class="selected-variation-id">'+myText1+$('input.variation_id').val()+'</div>');
        else
            $('div.woocommerce-variation-add-to-cart').after('<div class="selected-variation-id">'+myText2+'</div>'); // No ID selected

        console.log($('input.variation_id').val()); // Output in the browser console


        // Get and display the chosen variation ID after add-to-cart button
        $('select').blur( function(){
            if( '' != $('input.variation_id').val() )
                $('div.selected-variation-id').html(myText1+$('input.variation_id').val());
            else
                $('div.selected-variation-id').html(myText2); // No ID selected

            console.log($('input.variation_id').val()); // Output in the browser console
        });
    });
    </script>
    <?php
    }
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested under WooCommerce 3+ and works.