How to add a custom field to checkout tab in Woocommerce?

Question

I'm using a plugin to create a multi-step checkout cart. It's documentation can be found here: http://woocommerce-multistep-checkout.mubashir09.com/documentation/

I've created a new tab with like so:

add_action('woocommerce_multistep_checkout_before', 'add_my_custom_step');

function add_my_custom_step() {
    $contents = '<h1>Custom Step</h1>';
    $contents .= '<div class="my-custom-step"> Place your step contents here. This can be anything including HTML/PHP </div>';
    echo $contents;
}

Now I'm trying to put within that custom step a whole bunch of new fields. How can I do this? I'm looking at woocommerce documentation and have tried this:

//what hook should I use here to put it in the tab I created?
add_action( 'woocommerce_multistep_checkout_before', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {

    echo '<div id="my_custom_checkout_field"><h2>' . __('My Field') . '</h2>';

    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Fill in this field'),
        'placeholder'   => __('Enter something'),
        ), $checkout->get_value( 'my_field_name' ));

    echo '</div>';

}

So basically this makes the whole page empty. I'm trying to figure out what hook I should use to make that field appear. If I use woocommerce_before_checkout_billing_form the field does appear but up top of the billing tab not the previous tab I need it to be in.

Answer 1

I just figured out that I can move the field from the other side using jquery. Not the best solution I suppose but it does work.

jQuery(function(){
    jQuery(".my-field-class").detach().appendTo(".my-custom-step")
})