How to rearrange/customize html in woocommerce checkout form fields

Question

I want to accomplish 2 things in my woocommerce checkout form: 1. Put some text between some groups of fields, for example (h3):

my custom heading&         


        

Answer 1

I'm not sure on part 1, but for part 2, you can modify the output of woocommerce_form_field() by filtering woocommerce_form_field_$type.

So your part 2 can be solved like so:

function so_39267627_form_field( $field, $key, $args, $value ){

    if ( $args['required'] ) {
        $args['class'][] = 'validate-required';
        $required = ' *';
    } else {
        $required = '';
    }

    $args['maxlength'] = ( $args['maxlength'] ) ? 'maxlength="' . absint( $args['maxlength'] ) . '"' : '';

    $args['autocomplete'] = ( $args['autocomplete'] ) ? 'autocomplete="' . esc_attr( $args['autocomplete'] ) . '"' : '';

    if ( is_string( $args['label_class'] ) ) {
        $args['label_class'] = array( $args['label_class'] );
    }

    if ( is_null( $value ) ) {
        $value = $args['default'];
    }

    // Custom attribute handling
    $custom_attributes = array();

    // Custom attribute handling
    $custom_attributes = array();

    if ( ! empty( $args['custom_attributes'] ) && is_array( $args['custom_attributes'] ) ) {
        foreach ( $args['custom_attributes'] as $attribute => $attribute_value ) {
            $custom_attributes[] = esc_attr( $attribute ) . '="' . esc_attr( $attribute_value ) . '"';
        }
    }

    $field = '';
    $label_id = $args['id'];
    $field_container = '
%3$s
';

    $field .= '';

    if ( ! empty( $field ) ) {
        $field_html = '';

        $field_html .= $field;

        if ( $args['description'] ) {
            $field_html .= '' . esc_html( $args['description'] ) . '';
        }

        if ( $args['label'] && 'checkbox' != $args['type'] ) {
            $field_html .= '' . $args['label'] . $required . '';
        }

        $container_class = 'form-row ' . esc_attr( implode( ' ', $args['class'] ) );
        $container_id = esc_attr( $args['id'] ) . '_field';

        $after = ! empty( $args['clear'] ) ? '
' : '';

        $field = sprintf( $field_container, $container_class, $container_id, $field_html ) . $after;
    }
    return $field;
}
add_filter( 'woocommerce_form_field_password', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_text', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_email', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_tel', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_number', 'so_39267627_form_field', 10, 4 );

You would need to write a few more functions (mostly I copied and pasted whole swaths of code from WooCommerce and then just swapped the label part around ) for other other field types, but this should serve as an example.