Sauter la navigation

[Résolu] Bootstrap 4 and Woocommerce stripe problem

Ce fil est résolu. Voici une description du problème et la solution proposée.

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 Il y a 5 années et 1 mois. 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 – 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)

Marqué : 

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

Dernière mise à jour par Francisco Ramón Molina Busquiel Il y a 5 années et 1 mois.

Assisté par: Shane.

Auteur
Publications
#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: lien caché
lien caché

Thanks for your help.
Regards,
Jose

#1473893

Shane
Supporter

Les langues: Anglais (English )

Fuseau horaire: 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

Les langues: Anglais (English )

Fuseau horaire: 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.