WooCommerce add heading at start of custom fields - woocommerce

Question

I have created custom fields in my WooCommerce checkout page billing form. It all works fine but I am trying to add an h3 element with text in between. So basically I ask for some additional information in the billing form, but I want to give that a heading.
I tried to create a h3 dynamically with Javascript/jQuery and insert before the specific id I want it to be. But this didn't work as I liked and I rather have a server-side solution.
Thanks in advance!
Here's the function where I define my custom fields. I've tried an echo at the beginning but it ends up displaying at the top of the entire form.
// Modify billing fields
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_phone']);
unset($fields['billing']['billing_email']);
//echo '<h3>Wie is de verzender?</h3>';
$fields['billing']['name_sender'] = array(
'label' => __('Uw naam', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true
);
$fields['billing']['email_sender'] = array(
'label' => __('Uw email', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true
);
$fields['billing']['phone_sender'] = array(
'label' => __('Uw telefoonnummer', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true
);
$fields['billing']['anoniem'] = array(
'label' => __('Anoniem verzenden?', 'woocommerce'),
'type' => 'checkbox',
'class' => array('form-row-wide'),
'clear' => true
);
return $fields;
}
A visual explanation:
Visual explanation

Answer 1

You can hook into the woocommerce_form_field_<field_type> filter. This allows us to add HTML output for an additional field type (and in this case we can output HTML for a heading instead) and we can use this new heading "field type" when modifying checkout fields with the woocommerce_checkout_fields filter.
// Add field type to WooCommerce form field
add_filter( 'woocommerce_form_field_heading','sc_woocommerce_form_field_heading', 10, 4 );
function sc_woocommerce_form_field_heading($field, $key, $args, $value) {
$output = '<h3 class="form-row form-row-wide">'.__( $args['label'], 'woocommerce' ).'</h3>';
echo $output;
}
// Modify checkout fields
add_filter( 'woocommerce_checkout_fields','custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
$fields['billing']['billing_heading_name'] = array(
'type' => 'heading',
'label' => 'Heading here',
);
When modifying fields using the woocommerce_checkout_fields filter you can now place your new heading field in any position you need.

Answer 2

function filter_woocommerce_form_field_radio( $field, $key, $args, $value ) {
// Based on key
if ( $key == 'radio_choice' ) {
if ( ! empty( $args['options'] ) ) {
$field = '<div><h1>Heading</h1><ul>';
foreach ( $args['options'] as $option_key => $option_text ) {
$field .= '<li>';
$field .= '<input type="radio" value="' . esc_attr( $option_key ) . '" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '_' . esc_attr( $option_key ) . '" />';
$field .= '<label>' . esc_html( $option_text ) . '</label>';
$field .= '</li>';
}
$field .= '</ul></div>';
}
}
return $field;
}
add_filter( 'woocommerce_form_field_radio', 'filter_woocommerce_form_field_radio', 10, 4 );