Layout issue on checkout – two columns

Hi @favdes,

I’ve checked out your website and noticed that the Billing details and Order summary sections are displayed side by side in two columns.

Often, these types of issues could be related to the web browser you’re using. A good first step to troubleshooting this would be to try clearing your browser’s cache. This can often help in resolving general site loading or performance issues.

You can follow our detailed guide on clearing browser cache here: https://wordpress.com/support/browser-issues/#clearing-your-browser-cache

If this doesn’t work or you have more questions, just let us know, and we’ll be happy to help!

Hello,

Thank you for taking a look. I’m afraid I did try that and tried the site on a couple of machines. I tried again today and still the same issue I’m afraid. When I have an item in the cart and go to the checkout page, the sections were still out of line.

If you would be able to take another look, I would be grateful. If it is not possible to fix, is there a way to change the layout from ‘grid’ to a single column?

Many thanks

Hi @favdes,

I’ve tried numerous times and finally managed to replicate the issue on your website. Interestingly, the problem doesn’t appear when I test it in incognito mode, suggesting it might be related to cache.

Since you are using Elementor to build the checkout page, could you please go to Elementor > Tools > Regenerate CSS and click on the Regenerate Files button, and see whether it resolves or not?

Additionally, how about giving WooCommerce’s default checkout shortcode a shot instead of the Elementor widget? I’d love to see if that makes a difference.

[woocommerce_checkout]

If the issue doesn’t pop up with the WooCommerce shortcode, then it’s likely tied to the Elementor and the widgets you’ve been using.

In that case, it would be best to reach out to the plugin’s developers for further assistance. Since this is a third-party plugin which we don’t provide support for (please see our Support Policy). I am sure they will have no problem supporting you there.

I hope this helps! Please let us know how it goes or if you need further assistance.

Hello @shameemreza,

Thank you for your reply.

I tried what you suggested but no joy I’m afraid. I have added some code to the site to resolve two of the issues though. Just one more which I am stuck on now which is that on the /cart page, the ‘Proceed to checkout’ button text is under the button itself. It looks like there is a <br> in the code which is knocking the button label down a line so that it is appearing under the button itself.

If you get a chance and could take a look for me, I would be grateful. I will contact Elementor support now as well in case it is an issue on their end.

Thanks again.

Hi @favdes,

Yes, that’s strange. Normally, a <br> tag shouldn’t appear in front of the button text. However it might coming from the Elementor widget you have used or from your custom code.

After checking, it looks like you have done a heavy customization, that could also be causing this issue.

As you’ve already reached out to Elementor support team, they’re the best resource to help you resolve this problem. I am sorry for not able to provide a working solution.

I wish I could help more, but hope you will be able to resolve this issue with Elementor’s support.

Feel free to create a new topic if you need further help with WooCommerce core.

Thanks for understanding.

It seems that I found a solution!

Had the same problem on a client site, Elementor is installed, but not used in this case.

Somehow a flex element is hidden there between the 2 columns, so if you hide that with CSS, it works again!
The code you need to add to the custom CSS:
wc-order-attribution-inputs {
display:none;
}

Woocommerce > Settings > Advanced > Features. Option for “Order Attribution” which is enabled.
This adds a “wc-order-attribution-inputs” tag inside the checkout form causing the flexbox to break into 1 column.

Greetings,
Mark

• This reply was modified 10 months, 1 week ago by Mark Windisch.
• This reply was modified 10 months, 1 week ago by Mark Windisch.

Hi Mark,

Thank you for sharing your solution with us and the WooCommerce community. I’m glad to know you were able to resolve the issue by using custom CSS code.

Your feedback is valuable and helps us improve our products and services. We appreciate your time and effort in troubleshooting this issue and posting your findings on the forum.

Just so you know – we will now close this ticket as solved. If you have any other questions or issues, please feel free to open a new ticket and we’ll be happy to assist you.

Thank you for choosing WooCommerce and have a great day!

Hi
I had the same issue. I solved it by adding this code to the custom CSS. It would be good to fix this bug at its root because it occurs when upgrading from WooCommerce 8.7.0 to WooCommerce 8.8.3.
thank you
Antonio

The code you need to add to the custom CSS:
wc-order-attribution-inputs {
display:none;
}

I bumped into some <br> breaks being added to some of the buttons on woocommerce pages also. One example was the “Proceed to Checkout” button had “<br>Proceed to Checkout”.

This also happened on the my account page where breaks were added before the text on the bullet points. The same solution applied.

After looking all over the place, and not finding an answer, the solution was very simple. For my situation the shortcode had been added in elementors text block, not via the woocommerce pages or dedicated shortcode block. The text block must parse the content and add in some extra formatting before going to the screen. Once I deleted the text block and added the shortcode the other way all the mystery breaks disappeared.

Hope this helps someone.
Cheers

Hello @miked79,

Thank you for sharing the solution and contributing to the WooCommerce Community. This can indeed help others who might encounter similar issues.

Should you have further inquiries, kindly?create a new topic here.

Cheers!