WooCommerce Checkout Conflict With Bootstrap 4.x | Code For Developers

WooCommerce Checkout Conflict with Bootstrap 4.x

WooCommerce Checkout Conflict with Bootstrap 4.x. simple small code can fix this issue

If we use Bootstrap 4 there will be some issues in the checkout field. it something like this

Checkout Bootstrap 4 issue

New bootstrap 4+ has css class like this: col-1, col-2 etc

WooCommerce has the same CSS class ( eg col-1, col-2, etc ) used in the checkout page. If any theme is built on Twitter Bootstrap 4+ then those CSS classes will make conflict and the checkout page will be broken.

To solve WooCommerce Checkout Conflict with Bootstrap 4.x issue

.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce form .form-row {
  display: block;

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
  max-width: unset;

That it. now it field will be looks perfect

Previous Code

Get WooCommerce product info

Show product info in the place as you wish to. It ...

Next Code

Remove WooCommerce checkout fields

Remove WooCommerce Checkout field with simple filt ...

Leave a Reply

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

1 Comment

If you find it useful

Buy me a coffee









WooCommerce Ajax Product Search and Category Filter Without Plugin

WooCommerce Ajax Product Search with Category Filt ...

WooCommerce Discount based on Cart Item

A discount on the total order with condition based ...

Enabling Guest Checkout in WooCommerce: Bypassing Email Verification for Order Payment

Enable guest payment, bypass email verification. E ...

Implementing WooCommerce Shop Page Quantity Input and Plus (+) Minus (-) Button with simple Code

Enhance the user experience on your WooCommerce we ...

Add an additional custom checkbox in the WooCommerce checkout

Add an additional custom checkbox after the terms ...