N1 Easy Way Creating multistep user registration with custom meta data and WooCommerce

Creating multistep user registration might be a difficult challenge espessially when you need to collect and add custom meta data for each registrant. Here we are gonna cover full process of adding the registration including how each code needs to act to achieve the desired result.

Multistep user registration
A screenshot from the user registration process

The user registration is going to happen on the second step whan user also chooses the team and other details, so let’s start the job with the Plugins we need those are ACF and ACF Forms.

First step will be creating fields for the from which is going to register the users and then we start setting up the form to create new users with custom meta data and then we choose the form optin in ACF and connect to the form we have already created.

You can find instructions how to do it in the website of ACF Forms. Please note that this functionality reuqires having PRO option of the plugin, which is gonna make the work a lot easier, as soon as custom coding is goinf to take long time and it is a different topic for a differnt lesson. So as soon as yo uhave it all ready let’s pass to coding the multistep user registration.

Multistep user registration

First our all let’s create a page which is going to handle the registration. For this in the file of the theme let’s add a page called page-your-name.php(the permalink shall exactly match the name, so in our case it is yourwebsiteurl.com/your-name). And let’s add the HTML code inside it.

 <div class="multistep-user-registration-first-part-of-form">
       <!--  Here we echo the shortcode of the form  -->
       <?php echo do_shortcode("[advanced_form form='form_4521a085655435']") ?>
 </div>
 <div class="multistep-user-registrationn-add-on-next-stage">
   <div class="addon-registration-add-on-next-stage-conter d-flex">
      <!--  Here we will append the filds from first part later using JavaScript  -->
   </div>
 </div>
 <div class="multistep-user-registration-add-on-thirth-stage">
       <!--  Here we will make the checkput by the product ID we need  -->
       <?php echo do_shortcode('[woocommerce_checkout]') ?>
 </div>

In order to be able to create the user on the second step we can use appending functionality of Java Script. We are going to use jQuery library which helps to write better and faster functions.

Please make sure to add styles to the second and thirth steps so as they are not visible. And after each time the button is clciked the secind step is set to display block and the first is made to display none. And the same is being done for the thirth step.

Styling the form

We need to grab the elements from the div which contains the form inputs and append to new div which will be the second step of our multistep user registration and append button to the buttom area. Here is an example of code.

<script>
  
/* 
****  Hereby we append the fields we want. You can find the classnames you need in you HTML code 
*/
jQuery(".acf-field-621bdb69737af").appendTo(jQuery(".addon-registration-add-on-next-stage-conter"));
jQuery(".acf-field-621be0bba16a1").appendTo(jQuery(".addon-registration-add-on-next-stage-conter"));
jQuery(".acf-field-621be0f85b5bf").appendTo(jQuery(".addon-registration-add-on-next-stage"));
jQuery(".acf-field-621be126918ee").appendTo(jQuery(".addon-registration-add-on-next-stage"));
jQuery(".returing-player-form-cont-forgot").appendTo(jQuery(".acf-field-621cfa54e35bd"));
jQuery(".acf-button.af-submit-button").appendTo(jQuery(".acf-form-submit-my"));
  
/* Let's remove type="submit" attribute from button and add it on the next step so as 
on the first click it takes us on the next step and on the next step adds the user */
jQuery(".acf-button.af-submit-button").removeAttr("type"); 
  
//Be sure to add type="submit" on the second step using onclick function Here is the code
jQuery(".your-class").click(function() {
  jQuery(".acf-button-special-click-btn-1").attr("type","submit");
}
  
</script>

So after this initial set up we need to make a woo commerce checkout on the thirth step. Now we need to use some PHP coding skills to achieve the result. First you need to create a file in your parent theme cold page-your-name.php. To make this work you need to have the exact same URL on your page as it comes in the name of the file.

Adding woocommerce product

On the thirth step of our dynamic multi step form you need to add woocommerce checkout shortcode.

 <div class="addon-registration-add-on-thirth-stage">
      <?php echo do_shortcode('[woocommerce_checkout]') ?>
 </div>

So this means if the name of the file is page-your-name.php, the url of the page shall be yourwebsite.com/your-name.php. You can always control the url’s from the right side of the editor of page editor.

On the top of the page we need to add the following code.

<?php 

global $woocommerce;
$woocommerce->cart->empty_cart(); 
$woocommerce->cart->add_to_cart( 1563 ); // you can pass a number here

get_header()

Final steps

At this step we are done with multistep user registration now we make woocommerce checkout as you can see in the code above. At first we declare woocommerce variable on the thirth line, then on the fourth line we use native woocommerce function to empty the cart.

Final step of multi step registration form template

We empty the card in order to be sure that in case of reload or visiting again after a while the user is not forced to pay double subscribtions/products as according to your need.

You can follow the process on my youtube video. Did my post help? If you have more questions or you are still ahving problems follow my video where I explain in more details the multistep user registration.

Katen Doe

Hovhannes Verdyan

Hello, I’m a developer who loves WordPress and loves helping peopls let me know if you have any question by leaving your question in comments in one of my youtube videos. Click here to go to my channel.