Show only non empty custom fields label / value in Woocommerce

Question

Is it possible to only show the Custom Field: label when the input field has content in it. At present if the custom field is empty it still displays the Custom Field: label on the product detail page.

I have included the last snippet of code from my functions.php file for my custom field below.

add_filter( 'woocommerce_available_variation', 'jms_add_custom_field_variation_data' );

function jms_add_custom_field_variation_data( $variations ) {
    $variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
    return $variations;
}

Answer 1

Try the following that will not add the custom field to variations if it's empty:

add_filter( 'woocommerce_available_variation', 'add_custom_field_variation_data' );
function add_custom_field_variation_data( $variations ) {
    if( $value = get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) )
        $variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . $value . '</span></div>';
    return $variations;
}

Code goes in function.php file of your active child theme (active theme). Tested and works.