[Resolved] columns in checkout resized by Toolset types css

[Author]

Posts

[graceannA]

I am trying to: set up our checkout form using the WooCommerce widget in Elementor on our staging site.

Link to a page where the issue can be seen: hidden link

I expected to see: A checkout form with two columns, but the columns on the left side are both too narrow. On inspection of the code, the columns appear to be set to 8.3333% by css in the toolset plugin. I'm not sure why this is affecting the form because I don't think I'm using a toolset view here, but it appears that the toolset css is overriding the WooCommerce css?

Thanks for your help.

[Christopher Amirian]

Hi,

Welcome to Toolset support. Toolset uses the Bootstrap library to manage the CSS and styling of the Views generation. The CSS you mentioned is part of that library.

If you want, you can turn that off, but then you will be responsible for the styling of the content generated in the views or content templates.

From your WordPress dashboard, navigate to:
Toolset → Settings → General
Scroll down until you find the “Bootstrap loading” option.
It’s under the “Front-end Content” or “General Settings” tab (depending on your Toolset version).
You’ll see three options:
Toolset should load Bootstrap 3
Toolset should load Bootstrap 4
The theme or another plugin is already loading Bootstrap (do not load it again)

Select the third option:

“The theme or another plugin is already loading Bootstrap”
(In newer versions it may read: “Do not load any Bootstrap files”)

Click Save at the bottom of the page.

Alternatively, you can add a CSS code for that specific page to override the Bootstrap CSS.

Thanks.

[graceannA]

Thank you, this worked to solve the problem.