Add custom css class to WooCommerce checkout fields

Question

I would like to be able to add a custom CSS class to my WooCommerce checkout fields. I\'m using twitter Bootstrap and I would like to be able to use their .form-control clas

Answer 1

@Chetan's link and run answer does kind of give you what you want, but as ever they're never very good answers.

The best resource for this is the WooCommerce Codex page on Customizing checkout fields using actions and filters.

In the 'Customizing WooCommerce Checkout Field Labels and Placeholder Text' in Chetan's page you have the following code which you need to add to your functions.php, I've modified it in such a way that it should do what you want, but I haven't tested the code:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'my_theme_custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function my_theme_custom_override_checkout_fields( $fields ) {
     foreach ($fields as $fieldset) {
         foreach ($fieldset as $field) {
             $field['class'] = array('form-control');
         }
     }
     return $fields;
}