How To fix WooCommerce checkout fields when using bootstrap on a custom theme?

The checkout Billing details form is all messed up when using bootstrap because it conflicts with the default css classes applied by woocommerce. Therefore, there are few steps to take to adjust them. We can use two approaches but the latter is better.

Fix Woocommerce checkout fields | Solution 1

✔ 1. Find the templates responsible for rendering the form fields onto the checkout page and copy them inside your theme folder
form-checout.php and form-shipping.php and form-billing.php (copy them inside yourtheme/woocommerce/checkout/ ).
✔ 2. Move the woocommerce_checkout_billing and woocommerce_checkout_shipping actions inside a bootstrap the default grid – the form inside the form-checkout should contain the following from line 38.

✔ 3. Add the form-group and form-control bootstrap css classes to the form elements for the billing and additional information.

✔ 4. move the order_comments textarea out of the span element using javascript
If the additional information textarea is messed up it’s because the span element affects how we visualize it.
therefore move it out of the span element will fix that. A quick way i found to fix that, might not be the best practice, is to move
the element in the DOM using javascript.

inside the form-shipping.php file, add the following in a script tag under the code defined above;

var order_comments = document.getElementById("order_comments");
 
var order_comments_field = document.getElementById("order_comments_field"); 

var firstChild = order_comments_field.firstElementChild;

order_comments_field.insertAdjacentElement('beforeend', order_comments);

@critical! The above solution however, won’t fix the problem that we have also on all the other input fields, including those just fixed in the Billing details page!

Fix checkout fields | Solution 2 (Better)

To solve the problem globally we can override the woocommerce_form_fields function and remove the elements from the output.

✔ 1 create a folder inside our includes directory includes/woocommerce and place a file here woocommerce_functions.php.

✔ 2 Now you can edit your theme functions file and include the following code:

include(dirname(__FILE__) . '/includes/woocommerce/woocommerce_functions.php'); 

✔ Copy the woocommerce_form_fields function that you find in plugins/woocommerce/includes/wc-template-functions.php (between line 2600 and 2839) inside our woocommerce_functions.php file

✔ Change the code from lines 2800 and 2818 from this:

if ( ! empty( $field ) ) {     
    $field_html = '';
    if ( $args['label'] && 'checkbox' !== $args['type'] ) {         
        $field_html .= '' . $args['label'] . $required . '';     
    }
    $field_html .= '' . $field; // <-- CHANGE THIS LINE     
    if ( $args['description'] ) {         
    $field_html .= '' . wp_kses_post( $args['description'] ) . '';     
    }     
    $field_html .= ''; // <-- REMOVE THIS LINE     
    $container_class = esc_attr( implode( ' ', $args['class'] ) );
    $container_id = esc_attr( $args['id'] ) . '_field';
    $field = sprintf( $field_container, $container_class, $container_id, $field_html ); 
}

to this:

if (!empty($field)) {     
$field_html = '';     
if ($args['label'] && 'checkbox' !== $args['type']) {
         $field_html .= '' . $args['label'] . $required . '';
     }
     $field_html .= $field;     
if ($args['description']) {
         $field_html .= '' . wp_kses_post($args['description']) . '';     }     
$container_class = esc_attr(implode(' ', $args['class']));     $container_id = esc_attr($args['id']) . '_field';     
$field = sprintf($field_container, $container_class, $container_id, $field_html); 
}

Hire a professional WordPress Developer

If you are not confident editing your code it’s a good idea to hire a professional WordPress developer. I offer a wide range of services for WordPress and WooCommerce and you can hire me on hourly basis or with a dedicated plan. Find out more below.

Got a question?