[Resolved] Toolset blocking divi checkout page

[Author]

Posts

[emmaT-2]

Tell us what you are trying to do? I want to edit the checkout page with divi as it looks better but Toolset doesn't seem to be working with that page.

Is there any documentation that you are following? No, couldn't find any.

Is there a similar example that we can see? Here is a video explaining the issue hidden link

What is the link to your site? hidden link

[Minesh]

Hello. Thank you for contacting the Toolset support.

It seems to be conflict with CSS.

Are you using Bootstrap with your site? If no:
What if you try to disable the Bootstrap by navigating to:
=> Toolset => Settings tab and from section "Bootstrap loading" select the desired option and check if that help you to resolve your issue.

[emmaT-2]

Thank you, that was the issue. I was using Bootstrap 4 so I could customise the buttons on the forms. I've change the setting.

While I'm here, is there a way to adjust the heights (padding) of the input fields for the forms so that they are a bit wider (see screenshot)?

Is CSS the only way to customise a form button?

Thanks heaps

[emmaT-2]

Sorry, I thought it was fixed but the Toolset bootstrap and Divi are still conflicting. Please see the video hidden link

Thank you

[Minesh]

Unfortunately - the video you shared is not working.

Can you please send me access details with few screenshots or video?

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Form's uses the Bootstrap library and for that you'll have to include the Bootstrap Library from Toolset > Settings > General and from section "Bootstrap loading" select desired library.

If that affects the original issue then please check the following errata page:
- https://toolset.com/errata/bootstrap-4-columns-classes-col-1-and-col-2-conflicts-with-woocommerce/

Please check the following related ticket that might help you:
- https://toolset.com/forums/topic/woocommerce-checkout-page-problems-when-toolset-activated/#post-1551899

[emmaT-2]

It's not perfect, I had to add this code .woocommerce-billing-fields .form-row, .woocommerce-shipping-fields .form-row,.woocommerce form .form-row {
display: block;
}

.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
max-width: unset;
}

But it still blocks the shipping to address section and notes section but because I don't need that information for this product as it's online. I've removed them. I'll see how this goes and get back to you, if I need. Thank you for your time and help today. Much appreciated.

[Minesh]

Great - you can mark resolve ticket when you can.