Skip Navigation

[Gelöst] Bootstrap 4 and Woocommerce stripe problem

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

Problem:

The issue here is that the user has Woocommerce stripe checkout enabled as well as bootstrap 4 enabled on their site. However the stripe checkout page fields were not displaying correctly because of bootstrap.

Solution:

In this case the best solution would be to use css to remedy the issue.

Here is a sample css that was used to resolve this issue for the client.

.wc-stripe-elements-field{
width: 100%;
}

.stripe-card-group{
width: 100%
}
This support ticket is created vor 4 Jahren, 10 Monaten. 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.

Heute stehen keine Supporter zur Arbeit im Werkzeugsatz-Forum zur Verfügung. Sie können gern Tickets erstellen, die wir bearbeiten werden, sobald wir online sind. Vielen Dank für Ihr Verständnis.

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

Supporter timezone: America/Jamaica (GMT-05:00)

Dieses Thema enthält 4 Antworten, hat 2 Stimmen.

Zuletzt aktualisiert von Francisco Ramón Molina Busquiel vor 4 Jahren, 10 Monaten.

Assistiert von: Shane.

Author
Artikel
#1473703

Hi,

If I enable Bootstrap 4, the Woocommerce purchase finalization page was poorly formatted, Waqar gave me a solution on the ticket:
https://toolset.com/forums/topic/problems-with-bootstrap-4-and-divi-4-woocommerce/
But now I have noticed that it also affects the entry fields for the stripe credit card request.
Please watch the following video: versteckter Link
versteckter Link

Thanks for your help.
Regards,
Jose

#1473893

Shane
Supporter

Sprachen: Englisch (English )

Zeitzone: America/Jamaica (GMT-05:00)

Hi Francisco,

Given that you are using Divi it is not recommended to load Bootstrap css when using Divi as they share the same classes. This will undoubtedly lead to more conflicts.

Regarding the stripe checkout issue I suspect that this is the same,.

However you can try using this css below to remedy the issue.

.wc-stripe-elements-field{
width: 100%;
}

Thanks,
Shane

#1473899

Hi Shane,

This has solved some problems, but not the field in which the credit card is inserted.
Look at the page.

Thanks for your help.
Regards,
Jose

#1473941

Shane
Supporter

Sprachen: Englisch (English )

Zeitzone: America/Jamaica (GMT-05:00)

Hi Francisco,

For the card field use this .

.stripe-card-group{
width: 100%
}
#1474481

Many thanks. Now it works perfectly.