Display a custom field for the selected variation in WooCommerce variable product

I'm using Woocommerce Min/Max Quantities and have set both the "Min" quantity and the "Group of" quantity for a lot of variations. I need to display these on the front end so that customers can see when they choose a variation, eg. 1000g Blue should be in quantities of 20, whereas 250g Blue come in quantities of 25.

The code I'm working with is as follows.

function variation_group_of_quantity_shortcode($atts) {
    // Retrieve the current product's ID
    $product_id = get_the_ID();

    // Get the value of the "variation_group_of_quantity" field for the current product
    $variation_group_of_quantity = get_post_meta($product_id, 'variation_group_of_quantity', true);

    // Return the value as output
    return $variation_group_of_quantity;
}
add_shortcode('variation_group_quantity', 'variation_group_of_quantity_shortcode');

I've used a short code to include the data on the page. The problem is it keeps creating a critical error. I had a piece of code that only displayed the global "Group of" quantity and that worked brilliantly.

Any ideas what I could do make this work? I'd be grateful.

Instead of using a shortcode (where you will never get the selected variation ID), you could display this 'variation_group_of_quantity' custom field next to the selected variation price using the following code:

add_action( 'woocommerce_available_variation', 'product_variation_group_of_quantity', 10, 3 );
function product_variation_group_of_quantity( $variation_data, $product, $variation ) {
    // Adding to the main product form the group of quantity custom field (for each variation)
    $variation_data['group_of_quantity'] = $variation->get_meta('variation_group_of_quantity');

    if ( $variation_data['group_of_quantity'] ) {
        // Adding "Group of quantity html to the formatted price html
        $variation_data['price_html'] .=  sprintf( 
            '<span id="group-of-quantity">%s %s</span>', 
            __('Grouped by quantity of', 'woocommerce'), 
            $variation_data['group_of_quantity'] 
        );
    } 

    return $variation_data;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

You will get something like:

ADDITION

Now you can also only use the following function, that will add to the main product for each variation your "grouped by quantity" custom field.

This will allow you with some JavaScript (jQuery) to display this custom field value for the selected variation where you like.

In the example below the custom field text + value will be displayed in the product META section (after the SKU).

The php code:

add_action( 'woocommerce_available_variation', 'product_variation_group_of_quantity', 10, 3 );
function product_variation_group_of_quantity( $variation_data, $product, $variation ) {
    // Adding to the main product form the group of quantity custom field (for each variation)
    $variation_data['grouped_quantity'] = $variation->get_meta('variation_group_of_quantity');

    return $variation_data;
}

The JavaScript code example (embedded with PHP):

add_action( 'woocommerce_after_variations_form', 'display_variation_group_of_quantity', 11 );
function display_variation_group_of_quantity() {
    ?>
    <script type="text/javascript">
    jQuery( function($){
        var text  = '<?php _e('Grouped by quantity of ', 'woocommerce'); ?>',
            sel   = 'grouped_quantity',
            html  = '<span class="'+sel+'"></span>',
            form  = $('form.variations_form');

        // In META Product Section, add after the sku, specific html line for the custom field value
        $('div.product_meta .sku_wrapper').after(html)

        // On select variation display your custom field html
        form.on('show_variation', function( event, data ){
            $('span.'+sel).html(text+'<strong>'+data.grouped_quantity+'</strong>');
            console.log(data.grouped_quantity); // For testing - To be removed
        });
        // On unselect variation set an empty value
        form.on('hide_variation', function(){
            $('span.'+sel).html('');
        });
    });
    </script>
    <?php
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

You will get something like: