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

For the first one you can do the following to display single input field

checkout_fields['billing']['billing_first_name'], 
    $checkout->get_value( 'billing_first_name' )
);

?>

where you can replace first_name with any key of the checkout billing fields

So for your example it will be something like this

my custom heading



    checkout_fields['billing']['billing_email'], $checkout->get_value( 'billing_email' ) ); ?>

As for the second I'm not sure how you can achieve that. I needed something similar and i used javascript to reposition the labels.

something like :

jQuery('form.checkout label').each(function(){
    jQuery(this).insertAfter(jQuery(this).parent().find('input'));
})