How to add a heading in between checkout fields of

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 entire fields sections 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

Instead of hooking into an existing woocommerce_form_field_<field_type> filter such as woocommerce_form_field_text, I prefer to use the woocommerce_form_field_<field_type> filter to create a new field type. This allows us to add HTML output for an additional field type (and therefore we can use HTML output 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',
    );

Using the above method the solution to the original question would be:

add_filter('woocommerce_checkout_fields', 'ac_checkout_reorder_fields');
function ac_checkout_reorder_fields($fields) {
    $fields['billing']['billing_heading_name'] = array(
        'type'      => 'heading',
        'label'     => 'Heading here',
    );
    $order = array(
        "billing_first_name", 
        "billing_last_name", 
        "billing_heading_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;
}

Answer 2

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 .= '<div id="add_custom_heading"><h2>' . __('Custom Heading Here') . '</h2></div>';
    }
    return $field;
}