Skip Navigation

WooCommerce Checkout page not looking nice when using Bootstrap 4

Won't fix

Reported for: Toolset Views 2.9.1

Symptoms

If Bootstrap 4 is active, there is a display issue on the WooCommerce Checkout page. The problem happens because both WooCommerce and Bootstrap use the col-1 and col-2 CSS class. Bootstrap 4 sets the max-width property to 8.3333333% and 16.666667%, respectively.

Because of this, WooCommerce’s col-1 and col-2 classes result in two very small columns when used in the page content.

Workaround

This issue happens with Toolset if it is set to load Bootstrap 4, however, the conflict is really between Bootstrap 4 and WooCommerce only.

You can follow this thread on WooCommerce GitHub page for a stable solution:

As a workaround, for now, you can de-queue Bootstrap on the checkout page using a custom code snippet like this one.

Of course, you’d have to change its condition to is_page( 'checkout' );.

3 thought on WooCommerce Checkout page not looking nice when using Bootstrap 4

Leave
a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>