Custom text field displayed on product page issue for WooCommerce variable products

Question

I am displaying a custom text field under the variable drop-down menu called "Einheitspreis". It was working before but stopped working after the latest updates. Now it is like in the picture when open page first time(There is always a value pre selected in the dropdown)

When select another value in the dropdown it works like it should

I guess there is a problem with the pre selected value

 <?php
   $custom_data = array();
   foreach ($available_variations as $prod_variation) :
    // get some vars to work with
    $variation_id = $prod_variation['variation_id'];
    $variation_object = get_post($variation_id);
    $variable_custom_field = get_post_meta( $variation_object->ID, '_text_field', true);

    $custom_data[$variation_id] = array(
        "custom_field_value" => $variable_custom_field
    );
endforeach;
?>
<?php if (!empty($variable_custom_field)) { ?>
           <span>Einheitspreis:  <span class="selected-variation-custom-field"><!-- Holds the value for the variation custom field --></span> </span>
 <?php } ?>
<script>
jQuery(function($) {
    var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
        variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
        $selected_variation_custom_field = $('.selected-variation-custom-field'); // see DIV above

    $('table.variations').on('change', 'select', function() {
        var $select = $(this),
            attribute_name = $select.attr('name'),
            selected_value = $select.val(),
            custom_field_value = "";

        // Loop over the variations_data until we find a matching attribute value
        // We then use the variation_id to get the value from variation_custom_fields
        $.each(variations_data, function() {
            if( this.attributes[ attribute_name ] &&  this.attributes[ attribute_name ] === selected_value ) {
                custom_field_value = variation_custom_fields[ this.variation_id ].custom_field_value;
                return false; // break
            }
        });

        // doing this outside the loop above ensures that the DIV gets emptied out when it should
        $selected_variation_custom_field.text( custom_field_value );
    });
});
</script>

Answer 1

You need to execute your code first when the DOM is loaded and also as you already do when selecting an attribute value. So to make your code reusable (for that 2 events), we set it in a function:

<?php
   $custom_data = array();
   foreach ($available_variations as $prod_variation) :
    // get some vars to work with
    $variation_id = $prod_variation['variation_id'];
    $variation_object = get_post($variation_id);
    $variable_custom_field = get_post_meta( $variation_object->ID, '_text_field', true);

    $custom_data[$variation_id] = array(
        "custom_field_value" => $variable_custom_field
    );
endforeach;

if (!empty($variable_custom_field)) { ?>
           <span>Einheitspreis:  <span class="selected-variation-custom-field"><!-- Holds the value for the variation custom field --></span> </span>
 <?php } ?>
<script>
    jQuery(function($) {
        var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
            variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
            $selected_variation_custom_field = $('.selected-variation-custom-field'); // see DIV above

        // We set everything in a reusable function 
        function getSelectOnChange( $select ){
            var attribute_name = $select.attr('name'),
                selected_value = $select.val(),
                custom_field_value = "";

            // Loop over the variations_data until we find a matching attribute value
            // We then use the variation_id to get the value from variation_custom_fields
            $.each(variations_data, function() {
                if( this.attributes[ attribute_name ] &&  this.attributes[ attribute_name ] === selected_value ) {
                    custom_field_value = variation_custom_fields[ this.variation_id ].custom_field_value;
                    return false; // break
                }
            });

            // doing this outside the loop above ensures that the DIV gets emptied out when it should
            $selected_variation_custom_field.text( custom_field_value );
        }

        // 1. AT START (Once Dom is loaded)
        $('select').each( function() {
            if ($(this).val() != '' )
                getSelectOnChange( $(this) );
        });

        // 2. WHEN SELECTING ATTRIBUTE VALUES (Live)
        $('table.variations').on('change', 'select', function() {
            getSelectOnChange( $(this) );
        });
    });
</script>

This code is tested and works… It display the custom field value for the default select field value (default variation)…