I think this your woocommerce documentation is wrong, that or the way checkout is handled is.
I followed the steps: Checkout (WooCommerce) | Bricks Academy
Basically, Gutenburg holds the shortcode for checkout. Bricksbuilder template is what controls it. Now the issue is the HTML.
Pages have the format: MAIN > SECTION > CONTAINER:
<main id="brx-content">
<section class="brxe-section">
<div id="brxe-mwslen" class="brxe-container">
BUT on the checkout page following the instructions we get UGLY:
ARTICLE > DIV > DIV > FORM > SECTION > CONTAINER
NO MAIN? EXTRA DIVS? 2 NOTICES WRAPPERS?
<article id="brx-content" class="post-226 page type-page status-publish hentry">
<div class="woocommerce">
<div class="woocommerce-notices-wrapper"></div>
<div class="brxe-container before-checkout">
<div class="woocommerce-notices-wrapper"></div></div>
<form name="checkout" method="post" class="woocommerce-checkout checkout" action="" enctype="multipart/form-data" aria-label="Checkout" novalidate="novalidate">
<section class="brxe-section"><div class="brxe-container">
Since my TEMPLATE is SECTION > CONTAINER > CHECKOUT ELEMENTS
Then shouldn’t the WOO Template match:
<main id="brx-content">
<section class="brxe-section">
<div id="brxe-mwslen" class="brxe-container"> WOO CHECKOUT…….
FOR A PROPER LAYOUT. You should NOT enter the shortcode in GUTENBURG. But make a bricks page for the checkout:
Render without wrapper, and do shortcode.
THIS WAY THE CHECKOUT PAGE GETS RENDERED WITH PROPER HTML STRUCTURE IMO.
But then to edit the checkout you have to be careful how you do it because you might next unnecessary sections/containers in the html structure… bricks doesn’t seem to handle this cleanly.
Ideally BRICKS should make it’s own shopify type dedicated checkout page that works, this will solve all problems.