How to rearrange/customize html in woocommerce checkout form fields - php

Question

I want to accomplish 2 things in my woocommerce checkout form:
1. Put some text between some groups of fields, for example (h3):
<h3>my custom heading</h3>
<p class="form-row form-row validate-required">
<input type="email">...
</p>
<h3>my other custom heading</h3>
<p class="form-row form-row validate-required">
<input type="text">...
</p>
<p class="form-row form-row validate-required">
<input type="text">...
</p>
2. Display input tag first and label tag as second in html (woocommerce display label before input by default)
I figured out that checkout form is displayed by this code (for billing):
<?php foreach ( $checkout->checkout_fields['billing'] as $key => $field ) : ?>
<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
<?php endforeach; ?>
How can I customize it in way I described?

Answer 1

I'm not sure on part 1, but for part 2, you can modify the output of woocommerce_form_field() by filtering woocommerce_form_field_$type.
So your part 2 can be solved like so:
function so_39267627_form_field( $field, $key, $args, $value ){
if ( $args['required'] ) {
$args['class'][] = 'validate-required';
$required = ' <abbr class="required" title="' . esc_attr__( 'required', 'woocommerce' ) . '">*</abbr>';
} else {
$required = '';
}
$args['maxlength'] = ( $args['maxlength'] ) ? 'maxlength="' . absint( $args['maxlength'] ) . '"' : '';
$args['autocomplete'] = ( $args['autocomplete'] ) ? 'autocomplete="' . esc_attr( $args['autocomplete'] ) . '"' : '';
if ( is_string( $args['label_class'] ) ) {
$args['label_class'] = array( $args['label_class'] );
}
if ( is_null( $value ) ) {
$value = $args['default'];
}
// Custom attribute handling
$custom_attributes = array();
// Custom attribute handling
$custom_attributes = array();
if ( ! empty( $args['custom_attributes'] ) && is_array( $args['custom_attributes'] ) ) {
foreach ( $args['custom_attributes'] as $attribute => $attribute_value ) {
$custom_attributes[] = esc_attr( $attribute ) . '="' . esc_attr( $attribute_value ) . '"';
}
}
$field = '';
$label_id = $args['id'];
$field_container = '<p class="form-row %1$s" id="%2$s">%3$s</p>';
$field .= '<input type="' . esc_attr( $args['type'] ) . '" class="input-text ' . esc_attr( implode( ' ', $args['input_class'] ) ) .'" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" placeholder="' . esc_attr( $args['placeholder'] ) . '" ' . $args['maxlength'] . ' ' . $args['autocomplete'] . ' value="' . esc_attr( $value ) . '" ' . implode( ' ', $custom_attributes ) . ' />';
if ( ! empty( $field ) ) {
$field_html = '';
$field_html .= $field;
if ( $args['description'] ) {
$field_html .= '<span class="description">' . esc_html( $args['description'] ) . '</span>';
}
if ( $args['label'] && 'checkbox' != $args['type'] ) {
$field_html .= '<label for="' . esc_attr( $label_id ) . '" class="' . esc_attr( implode( ' ', $args['label_class'] ) ) .'">' . $args['label'] . $required . '</label>';
}
$container_class = 'form-row ' . esc_attr( implode( ' ', $args['class'] ) );
$container_id = esc_attr( $args['id'] ) . '_field';
$after = ! empty( $args['clear'] ) ? '<div class="clear"></div>' : '';
$field = sprintf( $field_container, $container_class, $container_id, $field_html ) . $after;
}
return $field;
}
add_filter( 'woocommerce_form_field_password', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_text', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_email', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_tel', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_number', 'so_39267627_form_field', 10, 4 );
You would need to write a few more functions (mostly I copied and pasted whole swaths of code from WooCommerce and then just swapped the label part around ) for other other field types, but this should serve as an example.

Answer 2

For the first one you can do the following to display single input field
<?php
woocommerce_form_field(
"billing_first_name",
$checkout->checkout_fields['billing']['billing_first_name'],
$checkout->get_value( 'billing_first_name' )
);
?>
where you can replace first_name with any key of the checkout billing fields
So for your example it will be something like this
<h3>my custom heading</h3>
<p class="form-row form-row validate-required">
<?php woocommerce_form_field( "billing_email", $checkout->checkout_fields['billing']['billing_email'], $checkout->get_value( 'billing_email' ) ); ?>
</p>
As for the second I'm not sure how you can achieve that. I needed something similar and i used javascript to reposition the labels.
something like :
jQuery('form.checkout label').each(function(){
jQuery(this).insertAfter(jQuery(this).parent().find('input'));
})

Answer 3

As far as I think, woo commerce does not support html, there's a plugin known as woocommerce checkout field editor, see if it solves your issue.