Skip Navigation

[Resolved] Checkout page – fields not displaying correct

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

Problem:

In this user's case they had an issue with their checkout page not displaying correctly. Essentially the columns were displaying smaller than their normal size.

Solution:

The problem is being caused by a known conflict with Bootstrap 4 and Woocommerce. If you have Bootstrap 4 enabled on our Toolset plugins then the advice is to switch to Bootstrap 3 by going to Toolset -> Settings and scrolling to Bootstrap Loading.

This support ticket is created 3 years, 1 month ago. 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)

This topic contains 3 replies, has 2 voices.

Last updated by ilonaB-2 3 years, 1 month ago.

Assisted by: Shane.

Author
Posts
#2200567
Checkout not visible.png

Hello,

I'm using WooCommerce Subscriptions and their checkout shortcode.

However the checkout page isn't displaying the fields correct to add the users information -> see attached image.

Can you help me out fixing this issue?

#2200659
Reply - WooCommerce Support.png

Hi there,

In the meantime I also got the following reply from the WooCommerce Support (I hope this helps):

"I understand the checkout fields are not being displayed properly on your website.
Reviewing the source code for your checkout page I can see that there is some code overriding the default WooCommerce code: see attached image.

What's going on here is quite technical but essentially some other script on your website is forcing the checkout fields to be 8.33% the width of the screen instead of 48% which is what it should be. That's why they are not displaying correctly.
I can see that this code is being added by one of the Toolset plugins you're using on your website. I'm afraid we're not able to provide support for third-party plugins as per our support policy.

As a next step, I recommend you reach out to the developers of these plugins. "

Thanks in advance for your Support!

#2200803

Shane
Supporter

Languages: English (English )

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

Hi Ilona,

I believe this is being caused by the conflict between Bootstrap CSS and WooCommerce. If you go to Toolset -> Settings and under Bootstrap Loading just disable the bootstrap loading for the site and it should resolve the issue.

Thanks,
Shane

#2202097

Hi Shane,
Thanks for the reply!
Bootstrap 4 was causing the problem!
I changed it to Bootstrap 3 and the problem was resolved!

My issue is resolved now. Thank you!