1

I'm using woocommerce for the first time to create an e-commerce wordpress powered website. I need to apply the bootstrap 4 css form classes and remove the default classes that woocommerce will use to wrap the form elements. Using the inspector I've noticed that a <p class="form-row form-row-first"> tag is added before every <label> and <input>, also the inputs are wrapped inside a <span> tag and this will break all the bootstrap 4 layout. After some headche I've found a similar question here on SO, and I decided to give a try, but the solution will not work for me as I expect. What I want to do is to create a form that respect the css grid layout of bootstrap like this: 

<form>
 <div class="form-group">
 // form group wrapper for labels and inputs
  <label for=""></label>
  <input type="text" class="form-control" />
 </div>
</div>

This is the basic markup for a bootstrap 4 form. For some fields I want also to use the .form-row to group two fields like name and last name or similar into columns .col-sm-12 col-md-6 col-lg-6 .

Is this possible by using filters or hooks? I've found the core file that manage the fileds rendering function, but I don't want to edit the file to avoid messing up the code.

Now the billing and checkout form fields have this structure:

enter image description here

Thanks for the help.

sisaln
  • 210
  • 4
  • 16
  • Why not just override the WC css with your own... Using flexbox layout instead of default? – Howard E Jan 21 '20 at 13:06
  • @HowardE because I'm integrating woocommerce with a custom theme I've made that use bootstrap 4 as fornt-end framework. I've made a quick fix using css but it's not ideal for a deep integration – sisaln Jan 21 '20 at 13:19
  • That is a matter of opinion. You can simply add your css to your base custom theme. That is what I do. It works every time. – Howard E Jan 21 '20 at 21:49

2 Answers2

0

WooCommerce provide a way to override templates from your theme.

If you need to use the Bootstrap HTML markup and CSS classes, you will probably need to override WooCommerce templates following instructions given on WooCommerce documentation: https://docs.woocommerce.com/document/template-structure/

If you are using a theme that you didn't built yourself, the best practice is to create a child theme so you can override WooCommerce templates inside your child theme without altering the original and keep the ability to update it. https://developer.wordpress.org/themes/advanced-topics/child-themes/

Seb33300
  • 7,464
  • 2
  • 40
  • 57
0

If you use Bootstrap 4 and SASS you can make it with @extend

For example you can easily change the default woocommerce button to a bootstrap button like this:

.woocommerce .button {
  @extend .btn, .btn-primary;
}
froston
  • 1,027
  • 1
  • 12
  • 24