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


Cusotm.css
.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 ...

0 Comment

    Leave a Reply

    Your email address will not be published.

    15 − 10 =

    WooCommerce Discount based on Cart Item

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

    Get WooCommerce product info

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

    Update WooCommerce Delivery cost with condition

    Change Delivery price base on what item in cart ...

    Remove WooCommerce checkout fields

    Remove WooCommerce Checkout field with simple filt ...

    Replace add to cart button with the product page link & Change add to cart text

    `Replace add to cart button with product single li ...

    ACF

    JavaScript

    jQuery

    Others

    PHP

    WooCommerce

    WordPress

    skype

    Need Coding Help?

    Connect Skype
    top