WebTechIdeas

If you are using the woocommerce plugin, then it has it’s own forms and css to load the forms and content on different sections of the site. Sometimes, it won’t match with the css of your website and one such case can be when you are using Bootstrap.

Bootstrap has it’s own classes for styling the form and we can use hook to insert these classes for woocommerce form fields. Let’s do it for the checkout form.

/**
 * Adding bootstrap classes to woocommerce checkout form
 *
 * @param $fields
 * @return mixed
 */
function wti_add_bootstrap_to_checkout_fields($fields) {
    foreach ($fields as &$fieldset) {
        foreach ($fieldset as &$field) {
            // Add form-group class around the label and the input
            $field['class'][] = 'form-group';

            // Add form-control to the actual input
            $field['input_class'][] = 'form-control';
        }
    }

    return $fields;
}

add_filter('woocommerce_checkout_fields', 'wti_add_bootstrap_to_checkout_fields');

You need to add the above code in your theme’s functions.php file.