워드프레스에서 WooCommerce와 Bootstrap 4가 충돌할 때

WooCommerce도 Bootstrap도 포기할 수 없었습니다. 둘을 함께 쓰면 충돌이 생겨 레이아웃이 어색해집니다. 결제(checkout) 페이지에서 그 문제를 확인할 수 있습니다. 아래 CSS 몇 줄이면 아주 빠르게 해결됩니다. 이제 둘 다 마음껏 쓸 수 있습니다!

CSS

.woocommerce .col-1, .woocommerce .col-2 { 
    max-width:none; 
}
.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; 
}