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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.