Woocommerce Cart Fix for Bootstrap Websites

Last year Woocommerce made some code changes to their shopping cart that can cause any theme running Bootstrap to break the layout of their checkout page.

The file itself is form-checkout.php found in woocommerce/templates/checkout.

In this file, they now use ‘col-1’ and ‘col-2’ as their two columns in the checkout page. This conflicts with newer versions of Boostrap where ‘col-1’ and ‘col-2’ dictate column widths, and therefore show their checkout columns as very narrow.

Col-1 is a random and badly planned class for woocommerce – since it really doesn’t specify what the column is.

The easy way to fix this is to include some css in your theme that overwrites the max-width setting that Bootstrap has for col-1 and col-2.

Here’s the code that works:

.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;
}

Thanks to muktoapb who came up with the workaround at the original issue on github.