# SOLVED: WooCommerce standard checkout does not display properly **URL:** \ **Category:** Bugs\ **Tags:** v1-11\ **Created:** [December 1, 2024, 9:31pm UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393 "2024-12-01T21:31:04Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![pburki](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/2acd7d/32.png) [@pburki](https://forum.bricksbuilder.io/u/pburki)\ **Post date:** [December 1, 2024, 9:31pm UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/1 "2024-12-01T21:31:04Z")
Hello, I am currently developing a website with WooCommerce. I am using the standard check out leveraging the bloc editor for the sake of simplicity. The rest of the website is leveraging bricks. For some reasons, using the bricks theme, the checkout/payment page does not display properly. I have created a new install, just with bricks and Woo, just to make sure that this was not another plugin creating the problem, but I get the same result as on the site I develop: With Bricks theme: ![image](https://forum.bricksbuilder.io/uploads/default/original/3X/b/b/bbe0ce352edb325b0d4e7e16937b35cfca924388.png) The content is wider than the viewport. Seems like the whole section is moved to the right. With twenty-twenty-five, the page displays correctly: ![image](https://forum.bricksbuilder.io/uploads/default/original/3X/1/4/1412312caf677dd0e995ef0565d798074e9f2dff.png) Thanks Philippe ---
**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\ **Post date:** [December 2, 2024, 11:55am UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/2 "2024-12-02T11:55:47Z")
Hi Philippe, Thanks so much for your report! The .alignwide class causes the issue in this scenario. Please add this to Bricks » Settings » Custom CSS to set the width to match your container width. ```auto .woocommerce-checkout .alignwide { width: 100%; } ``` Best regards, timmse ---
**Author:** ![pburki](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/2acd7d/32.png) [@pburki](https://forum.bricksbuilder.io/u/pburki)\ **Post date:** [December 2, 2024, 9:58pm UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/3 "2024-12-02T21:58:47Z")
Hi Timmse, Thanks, this solved the problem. Shouldn’t that be out of the box though rather than having to enter some custom CSS ? Best regards, Philippe ---
**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\ **Post date:** [December 3, 2024, 9:10am UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/4 "2024-12-03T09:10:21Z")
Well, WooCommerce recently adapted the default checkout template, so the problem is now occurring (it wasn’t an issue before). In 9/10 cases, however, Bricks users don’t use the block template but build their own template. Nevertheless, I have created an improvement task. ---
**Author:** ![pburki](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/2acd7d/32.png) [@pburki](https://forum.bricksbuilder.io/u/pburki)\ **Post date:** [December 3, 2024, 9:15pm UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/5 "2024-12-03T21:15:30Z")
Hi Timmse, I completely get the fact that in 9/10 cases, users will build their own template. This is what I intended to do in the first place, but I was running into some layout issue with the components, and, due to the urgency of the project, I moved to the default checkout. Thinks I was struggling with (and did not have the time yet to troubleshoot) is why the option to ship to a different address displays incorrectly (and the tick-box is not working: ![image](https://forum.bricksbuilder.io/uploads/default/original/3X/5/3/53e862412d4650ec578ea9ddcddca706ccbd0648.png) and how to remove the underline under the star from mandatory fields. Best regards, Philippe ---
**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\ **Post date:** [December 4, 2024, 8:54am UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/6 "2024-12-04T08:54:53Z")
> [@pburki](#): > > Thinks I was struggling with (and did not have the time yet to troubleshoot)… If you can provide me with a live link where I can see the issue, it’s relatively easy to see what’s causing it 🙂 ---
**Author:** ![pburki](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/2acd7d/32.png) [@pburki](https://forum.bricksbuilder.io/u/pburki)\ **Post date:** [December 4, 2024, 11:24pm UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/7 "2024-12-04T23:24:45Z")
Thanks! Here is a link: [Schweizer Schürze](https://dev.localwebsolutions.ch/new-tablier/template/zahlungseite/) Best regards, Philippe ---
**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\ **Post date:** [December 5, 2024, 10:24am UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/8 "2024-12-05T10:24:03Z")
The templates are not set to be publicly accessible, so unfortunately, I can’t see it. Please enable this in Bricks » Settings » Templates, so I have a chance to take a look: ![CleanShot 2024-12-05 at 11.23.22@2x](https://forum.bricksbuilder.io/uploads/default/original/3X/9/1/91d7139ed44a44a7c41454be6e8aa39ae07e75b7.png) ---
**Author:** ![pburki](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/2acd7d/32.png) [@pburki](https://forum.bricksbuilder.io/u/pburki)\ **Post date:** [December 5, 2024, 10:27pm UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/9 "2024-12-05T22:27:07Z")
Hello, I have updated the settings. Thanks, Philippe ---
**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\ **Post date:** [December 6, 2024, 8:54am UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/10 "2024-12-06T08:54:23Z")
Hm, that doesn’t seem to work with the checkout. Please send temporary login credentials and a link to this thread to [help@bricksbuilder.io](mailto:help@bricksbuilder.io) using the email address you used during the purchase. ---
**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\ **Post date:** [December 6, 2024, 3:44pm UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/11 "2024-12-06T15:44:58Z")
Thanks for the login credentials! The issue is caused by coreframework’s `.checkbox` class. WooCommerce uses a checkbox class too, but for a different purpose, which coreframework can’t know. ![CleanShot 2024-12-06 at 16.38.15@2x](https://forum.bricksbuilder.io/uploads/default/original/3X/5/1/51b6b22ef67c1c064c59686fbb94d43fd843a5b8.png) Either you exclude .woocommerce-form\_\_label.checkbox from the coreframework checkbox style, or unset the checkbox styles within the checkout template, or simply remove the .checkbox class from coreframework. ---
**Author:** ![johannes](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/johannes/32/6440_2.png) [@johannes](https://forum.bricksbuilder.io/u/johannes)\ **Post date:** [December 6, 2024, 3:47pm UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/12 "2024-12-06T15:47:44Z")
When you click on the checkout block in Gutenberg and change the Layout type to none instead of wide, then you don’t need any custom css. This fixed it for me. ![image](https://forum.bricksbuilder.io/uploads/default/original/3X/0/0/002cced0d57b3b731b80bef7ef04dde04a4cc16c.png) ---
**Author:** ![pburki](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/2acd7d/32.png) [@pburki](https://forum.bricksbuilder.io/u/pburki)\ **Post date:** [December 9, 2024, 11:24am UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/13 "2024-12-09T11:24:46Z")
Hi Timmse, Thanks for your help. I still have a problem with the custom checkout. I cannot checkout as it tells me that I need to fill an address, which I have done. ![image](https://forum.bricksbuilder.io/uploads/default/original/3X/1/7/17a670e4c4d1825c5ba38cd127a8afc6c71bd856.png) Thanks, Philippe ---
**Author:** ![pburki](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/2acd7d/32.png) [@pburki](https://forum.bricksbuilder.io/u/pburki)\ **Post date:** [December 9, 2024, 11:25am UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/14 "2024-12-09T11:25:14Z")
Thanks Johannes - I will now try to go with the custom checkout flow, but it can still be useful in the future. ---
**Author:** ![Matej](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/matej/32/20184_2.png) [@Matej](https://forum.bricksbuilder.io/u/Matej)\ **Post date:** [December 18, 2024, 11:22pm UTC](https://forum.bricksbuilder.io/t/solved-woocommerce-standard-checkout-does-not-display-properly/28393/15 "2024-12-18T23:22:54Z")
Hi guys, We’ve fixed this in Bricks 1.12 BETA, now available as a manual download ([Bricks – Account](https://my.bricksbuilder.io/?beta=1.12)) Please let us know if you are still experiencing issues. You can see the full changelog here: [Bricks 1.12 Changelog – Bricks](https://bricksbuilder.io/release/bricks-1-12/) **As with any beta release, please do not use it on a production/live website. It is only meant for testing in a local or staging environment.** Best regards, Matej