Bootstrap4 Toolset CSS is causing conflict with my WooCommerce checkout page

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: How to build a site with Toolset, WooCommerce

This topic contains 2 replies, has 2 voices.

Last updated by Jean Rapenne 2 years ago.

Assisted by: Waqar.

Author

Posts

December 2, 2022 at 6:53 am #2507919

Jean Rapenne

I have recorded a screencast. Please have a look - hidden link.

Further, the col-1 class is added via WooCommerce

It's the reason why I connect with you the Toolset plugin author to fix the issue.

Regards.

Jean

December 2, 2022 at 11:48 am #2508075

Waqar

Hi Jean,

Thank you for contacting us and I'd be happy to assist.

This seems to be a style conflict, as both Bootstrap 4 and WooCommerce are using the same class names.

To overcome this, you can include the following CSS code at WP Admin -> Appearance -> Customize -> Additional CSS:


.woocommerce-checkout div[class*="col-"],
.woocommerce-checkout div[class*="col-"] label,
.woocommerce-checkout div[class*="col-"] .woocommerce-input-wrapper
{max-width: 100% !important;clear:both;width: 100%;}

I hope this helps and please let me know if you need any further assistance with this.

regards,
Waqar

December 2, 2022 at 1:29 pm #2508137

Jean Rapenne

My issue is resolved now. Thank you!