How to add new step in the wizard

New step can be added in the wizard using the hooks provided by the plugin . For example a new step after the shipping step can be added in the following way (you can add the following code into your theme functions.php file or in your plugin file)

add_action('woocommerce_multistep_checkout_after_shipping', 'add_my_custom_step');

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

Note: Title of the new step should be enclosed in h1 and then you must wrap your contents inside DIV tag.

How to add fields to new step

You can add new checkout fields through third party plugins like Checkout Field Editor or through the hooks/filters provided by the Woocommerce plugin. There are two possible ways to move your checkout fields into your newly created step

Through jQuery
Through WooCommerce Hooks

jQuery

Let suppose you have added fields through third party plugins like checkout field editor. In this case adding checkout fields to any existing or newly created step is quite easy. You just need to assign unique CSS ID or class to each of your checkout field then we can use jQuery to move these fields into any step.

jQuery(function(){
//my-custom-step is the class which we have assign to the wrapper DIV of our newly created element (See Above Example).
//#field_1, #field_2 and #field_3 are the unique ids of each input field
jQuery("#field_1, #field_2, #field_3").appendTo(".my-custom-step");
});

WooCommerce hooks

Lets take an example on how you can add a new field through woocommerce hooks in your newly created step

add_action('woocommerce_multistep_checkout_after_shipping', 'add_my_custom_step_with_new_field');

function add_my_custom_step_with_new_field( $checkout ) {
  wc_get_template( 'checkout/my-custom-step.php', array( 'checkout' => $checkout ) );
}

For this example we will create a new template file for our newly created step (Although you can directly put your code into functions.php file). We will create “woocommerce” folder in our theme then under this folder we will create subfolder named “checkout” and finally we will place our template file “my-custom-step.php” there.

Here is how the directory structure should look like

|-- YourTheme
  |-- woocommerce
    |-- checkout
       |-- my-custom-step.php

Once you have created the file open up “my-custom-step.php” and place the following code

 <h1> Step Title</h1>
<div class="my-custom-step">
 <?php
 woocommerce_form_field('my_field_name', array(
 'type' => 'text',
 'required' => true,
 'class' => array('my-field-class form-row-wide'),
 'label' => __('Fill in this field'),
 'placeholder' => __('Enter something'),
 ), $checkout->get_value('my_field_name'));
 ?>
</div>
}

Above code will will add new step in the checkout wizard and will place our newly created checkout field there. Next thing we need to do is to save the value of our newly created checkout text field

/**
 * Update the order meta with field value
 */
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );

function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['my_field_name'] ) ) {
        update_post_meta( $order_id, 'My Field', sanitize_text_field( $_POST['my_field_name'] ) );
    }
}

More information about adding/modifying checkout fields can be found here

Hooks

Plugin provides number of hooks to add new step in the checkout wizard. Each hooks is provided an optional $checkout paramater as an array so you can add new checkout fields. Here is a list of the hooks

woocommerce_multistep_checkout_before
woocommerce_multistep_checkout_before_shipping
woocommerce_multistep_checkout_after_shipping
woocommerce_multistep_checkout_before_order_info
woocommerce_multistep_checkout_after_order_info
woocommerce_multistep_checkout_after

woocommerce_multistep_checkout_before

This hooks is used to add a new step in the start of the wizard.

woocommerce_multistep_checkout_before_shipping

This hooks is used to add a new step before shipping step.

woocommerce_multistep_checkout_after_shipping

This hooks is used to add a new step after shipping step.

woocommerce_multistep_checkout_before_order_info

This hooks is used to add a new step before order information step.

woocommerce_multistep_checkout_after_order_info

This hooks is used to add a new step after order information step.

woocommerce_multistep_checkout_after

This hooks is used to add a new step at the end of the wizard

Documentation