Roy Vincent Niepes

Blog and Portfolio

Posted on by

How to make woocommerce input field use bootstrap?

How to make woocommerce input field use bootstrap?

Are you a bootstrap guru and looking a way how you could insert the form-control class on all woocommerce fields?

On some fields you can insert form-control class as long as it is on the template folder of woocommerce but what about those fields that generated by woocommerce?

You’ll be surprise that woocommerce has it already but just forgot to put a filter to it so we can add another class into the fields through the functions.php in our theme.

We will do a little bit of core modification here so please backup it first.

Open wc-template-functions.php under “includes” directory from woocommerce plugin folder.

Find the function woocommerce_form_field(in my woocommerce version it’s on the line 1579)


Notice the arrow I put into the image above? That’s what we need to modify.


 'input_class'       => array(), 


'input_class'       => apply_filters('wc_input_class',array()),

After doing the step above, insert this code below into your functions.php

add_filter( 'wc_input_class', 'add_wc_input_class' );
function add_wc_input_class($classes) {
	$classes[] = 'form-control';
	return $classes;

Now view the woocommerce checkout page or any page that has an input field.

See the result?

The bad thing on what we did is we modify the core of woocommerce and whenever the woocommerce has an update, all changes we did on the file will disappear.
How we can prevent it? Well, we only need to override it, but how?

Just copy the entire form helper function(woocommerce_form_field) of woocommerce and paste it to functions.php

This way, whenever the woocommerce has an update, the form helper we did will never be overwritten.
That’s it! Happy coding!

comments powered by Disqus