Documentation

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)

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.

WooCommerce hooks

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

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

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

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

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

How to add Order Review Step

You can add Order Review step using “woocommerce_multistep_checkout_after” hook provided by this plugin

Above code will add Order Review step as the last step in the Checkout wizard. Now you need to add javascript code into a separate file. Create a file “order-review.js” under “js” folder in your theme and add the following code in it

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

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