Add Step to JC WooCommerce Multistep Checkout

extra-step-to-js-multistep-checkout.php

/*
 * Add new checkout fields
 * See: https://www.kathyisawesome.com/woocommerce-customize-checkout-fields/ for saving/displaying order meta
 */
function kia_filter_checkout_fields( $fields ){
    $fields['extra_fields'] = array(
            'some_field' => array(
                    'type' => 'text',
                    'label' => __( 'Some field', 'your-plugin-textdomain' )
                    ),
            'another_field' => array(
                'type' => 'checkbox',
                'label' => __( 'Another field', 'your-plugin-textdomain' )
                )
            );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'kia_filter_checkout_fields' );

/*
 * Display the extra field on the checkout form by adding to a multistep checkout hook
 * As long as the HTML markup is <h1>Step Title</h1<div>Your Fields Here</div>
 * Your "step" will be added automatically by the jQuery Steps script
 */
function kia_extra_checkout_fields( $checkout ){ 

    if( ! empty( $checkout->checkout_fields['extra_fields'] ) ){ ?>
    
    <h1 class="title-extra"><?php _e( 'Additional Fields', 'your-plugin-textdomain' ); ?></h1>
    <div class="extra-tab-contents">

    <?php 
    // because of this foreach, everything added to the array in the previous function will display automagically
    foreach ( $checkout->checkout_fields['extra_fields'] as $key => $field ) : ?>

            <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

        <?php endforeach; ?>
    </div>

<?php }
}
add_action( 'woocommerce_multistep_checkout_before_order_info', 'kia_extra_checkout_fields' );