Woocommerce Bootstrap 4 CSS Columns Cart Fix

min read / WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: Woocommerce uses same CSS classes for their cart columns. It makes some problems with Bootstrap 4. Easy way to fix it.

Woocommerce uses same CSS classes for their cart columns. It makes some problems with Bootstrap 4. So if you use Toolset and Bootstrap 4, your cart will be propably messed up.

The fix is to change the width of woocommerce col-1 and col-2 to unset.

Here’s the trick:

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

0 comments