Saltar navegación

[Resuelto] Bootstrap 4 and Woocommerce stripe problem

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

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 hace 5 años, 1 mes. 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)

Etiquetado: 

Este tema contiene 4 respuestas, tiene 2 mensajes.

Última actualización por Francisco Ramón Molina Busquiel hace 5 años.

Asistido por: Shane.

Autor
Mensajes
#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: enlace oculto
enlace oculto

Thanks for your help.
Regards,
Jose

#1473893

Shane
Supporter

Idiomas: Inglés (English )

Zona horaria: 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

Idiomas: Inglés (English )

Zona horaria: 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.