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:
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.
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.
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:
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:
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 using the email address you used during the purchase.
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.
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.
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.
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.
