[Resolved] Bootstrap 4 and Woocommerce stripe problem

This thread is resolved. Here is a description of the problem and solution.

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 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.

Tagged: 

This topic contains 4 replies, has 2 voices.

Last updated by Francisco Ramón Molina Busquiel 2 months, 1 week ago.

Assigned support staff: Shane.

Author
Posts
#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: hidden link
hidden link

Thanks for your help.
Regards,
Jose

#1473893

Shane
Supporter

Languages: English (English )

Timezone: 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

Languages: English (English )

Timezone: 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.