How to add a heading in between checkout fields of Woocommerce

Question

I am customizing the WooCommerce checkout page fields. I want to add a heading (text) in between the fields. I have reordered the fields like this

add_filter('woocommerce_checkout_fields', 'ac_checkout_reorder_fields');

function ac_checkout_reorder_fields($fields) {

    $order = array(
        "billing_first_name", 
        "billing_last_name", 
        "billing_company", 
        "billing_email", 
        "billing_phone",
        "billing_address_1", 
        "billing_address_2", 
        "billing_postcode", 
        "billing_country" 
        

    );
    foreach($order as $field)
    {
        $ordered_fields[$field] = $fields["billing"][$field];
    }

    $fields["billing"] = $ordered_fields;
    return $fields;

}

Then I added a new heading like this

add_action( 'woocommerce_after_checkout_billing_form', 'add_custom_heading' );

function add_custom_heading( $checkout ) {

    echo '<div id="add_custom_heading"><h2>' . __('Custom Heading Here') . '</h2></div>' ;


}

Now the fields are re-arranged and the custom heading is showing. But I want the heading showing just below the name & company fields. With my code, the field is being added below. How I an reposition this in my desired place.

PS: I also tried to add customize the sections of the entire field with this hook woocommerce_checkout_fields adding placeholder and removing the labels. Here are the codes but this also does not help me solve the issue.

function add_wc_custom_fields($fields) {
global $woocommerce;
    $countries_obj   = new WC_Countries();
    $countries   = $countries_obj->__get('countries');

     $fields['billing']['billing_first_name'] = array(
            'label' => '',
            'placeholder' => _x('First Name*', 'placeholder', 'woocommerce'),
            'required' => true,
           'class'    => array( 'form-row-first' ),
        );
        $fields['billing']['billing_last_name'] = array(
            'label' => '',
            'placeholder' => _x('last Name*', 'placeholder', 'woocommerce'),
            'required' => true,
           'class'    => array( 'form-row-last' ),
        );
        $fields['billing']['billing_company'] = array(
            'label' => '',
            'placeholder' => _x('Company Name', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('checkout-billing-company')
        );
        $fields['billing']['billing_address_1'] = array(
            'label' => '',
            'placeholder' => _x('Address(Line 1)*', 'placeholder', 'woocommerce'),
            'required' => true,
            'class' => array('checkout-billing-addressL1')
        );
         $fields['billing']['billing_address_2'] = array(
            'label' => '',
            'placeholder' => _x('Address(Line 2)*', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('checkout-billing-addressL2')
        );
         $fields['billing']['billing_email'] = array(
            'label' => '',
            'placeholder' => _x('Email Address*', 'placeholder', 'woocommerce'),
            'required' => true,
            'class' => array('form-row-first')
        );
        $fields['billing']['billing_phone'] = array(
            'label' => '',
            'placeholder' => _x('Phone Number', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('form-row-last')
        );
        $fields['billing']['billing_city'] = array(
            'label' => '',
            'placeholder' => _x('Town/City', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('form-row-first')
        );
        
$fields['billing']['billing_state'] = array(
            'label' => '',
            'placeholder' => _x('State/County', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('form-row-first')
        );
    $fields['billing']['billing_postcode'] = array(
            'label' => '',
            'placeholder' => _x('Zip/Postcode', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('form-row-first')
        );
        $fields['billing']['billing_country'] = array(
            'label' => '',
            'type' => 'select',
            'placeholder' => _x('Country', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('form-row-last'),
              'options'    => $countries
        );
        return $fields;
    }

add_filter('woocommerce_checkout_fields', 'add_wc_custom_fields');

Answer 1

we can use the filter 'woocommerce_form_field_' . $type... where $type is the type of the input... in our case billing_company is of type text... this filter returns the html of the field, in our case billing field, billing_company.. the filter has 4 arguments being passed, these are $field, $key, $args, $value... we just need two of these...

add_action( 'woocommerce_form_field_text','reigel_custom_heading', 10, 2 );
function reigel_custom_heading( $field, $key ){
    // will only execute if the field is billing_company and we are on the checkout page...
    if ( is_checkout() && ( $key == 'billing_company') ) {
        $field .= '<p class="form-row form-row-wide">Custom Heading</p>';
    }
    return $field;
}

Important: If we don’t format it as a paragraph with the class form-row it will be put to the top of all billing fields by Woocommerce (reasons unknown to me). This shows us that this as “Hack” and maybe your goals are achieved better differently.