Dividing the billing form with heading tags and Divs

This is a complex change. What don’t you like about the standard checkout? we’ve tried to make it as simple as possible given the data we need to collect.

When the checkout is separated into multiple steps, it increases the conversion rates of the customer. I’m trying to give my customers more assurance and guidance. An extremely good example of this is AO.com

Can you give me any guidance on where to get started on this? I’ve been very heavily changing my theme and various plugins but this one has me a bit stumped.

I don’t necessarily want to create a separate form, but it would be nice to be nice to add headers to what I deem as different “sections”. I appreciate the support so far!

Not sure what metrics you’re looking at but seems mixed. Here is one in favour of one-step: https://www.getelastic.com/single-vs-two-page-checkout/

With A/B split testing, 50% of traffic was redirected to the original checkout, while the other 50% was served the new single-page checkout. After only 300 transactions, the winner was clear and we stopped the experiment after 606 transactions. Google Website Optimizer concluded that the single-page checkout outperformed the out-of-the-box checkout by a whopping 21.8%.

There are plugins to add multisteps but they are not vetted by us https://codecanyon.net/item/woocommerce-multistep-checkout-wizard/8125187

Sorry I wasn’t clear on that! I’m not looking to separate the form onto different pages. I simply want to add headers to separate the sections. Everything will remain on the one page. For example:

At the top of the form say something like: Step 1 of 3 customer info.

Then before the billing fields say : Step 2 of 3: Billing Info.

Then before payment: Step 3 of 3: Payment Info

Sorry I wasn’t clear on that! I’m not looking to separate the form onto different pages. I simply want to add headers to separate the sections. Everything will remain on the one page. For example:

At the top of the form say something like: Step 1 of 3 customer info.

Then before the billing fields say : Step 2 of 3: Billing Info.

Then before payment: Step 3 of 3: Payment Info

Here’s the best hack I’ve come up with so far that accomplishes what I’m looking for:
Added the following code to the last foreach loop within class-wc-countries

$address_fields['billing_step_2'] = array(
	'label'    	=> __( 'Step 2 of 3: Billing Info'),
	'required' 	=> false,
	'class'    	=> array( 'step-2' ),
	'clear'    	=> true,

				);

I used css to style the label as well as to hide the input form for this field.

To achieve a div wrap, I’ve just added another class within the items on the array that starts around line 485.

I’d prefer to have a div inserted instead of masking a field with css but I don’t really know where to go from here. Any suggestions? Here’s a screenshot of how the form/checkout looks now.

Look at the woocommerce_form_field() function in core. It outputs each of these fields and recognises certain types.

You could add your own custom type. e.g. open_div, then filter on this to return some custom HTML:

$field = apply_filters( 'woocommerce_form_field_' . $args['type'], $field, $key, $args, $value );