Bootstrap4 Toolset CSS is causing conflict with my WooCommerce checkout page

This support ticket is created Il y a 3 years, 6 months. There's a good chance that you are reading advice that it now obsolete.

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	-

Fuseau horaire du supporter : Asia/Karachi (GMT+05:00)

Marqué : How to build a site with Toolset, WooCommerce

Ce sujet contient 2 réponses, a 2 voix.

Dernière mise à jour par Jean Rapenne Il y a 3 years, 6 months.

Assisté par: Waqar.

Auteur

Publications

December 2, 2022 at 6:53 am #2507919

Jean Rapenne

I have recorded a screencast. Please have a look - lien caché.

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!