NO BUG: Extra div in Woocommerce V2 cart and checkout pages? + one more

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

Hello bricks team,

1- In the new version of the Cart, Checkout, and My Account pages, there is a div with the woocommerce class. In the previous version, this div did not exist; instead, the class was applied directly to the main tag (which has the ID brx-content). Is this a bug, or perhaps an improvement?

2- I am not sure whether the second point is a bug or a limitation. On the Cart page, we add a Section element along with a Container, and place the Cart V2 element inside it. If we go to the “Empty Cart” view and make change to the section element, that change is also applied to the section element on the Cart page.

This issue also occurs on the Checkout and “My Account” pages. Suppose we want to hide the header and footer on the “Thank You” page using custom CSS. To do this, we set the section’s height to 100vh so that the page content is perfectly centered. However, this height setting then applies to the Checkout section and other final steps as well.

In short, it makes sense that if we apply a background color or any other style to a section or container on the “Thank You” page, it is not applied to the “Checkout” page.

Best regards

Thanks for the detailed report.

The extra .woocommerce wrapper in the WooCommerce v2 output is expected. The v2 workflow renders Cart, Checkout, and My Account states directly on the assigned WooCommerce pages, and WooCommerce-specific styling/behavior still needs a .woocommerce wrapper.

For the second point, a Section or Container outside the Cart v2, Checkout v2, or Account Page v2 element is shared page structure, so styles applied there will affect the other preview states too. For state-specific styling, place and style the wrapper inside the relevant v2 state, or use a state-specific class/selector in your custom CSS. This is the same as in v1, you can style anything on the Cart, Checkout or My Account page, but anything rendered via the Shortcode will be controlled by the respective templates.

Relevant docs:

WooCommerce advanced modular elements | Bricks Academy
Cart v2 | Bricks Academy
Checkout v2 | Bricks Academy
Account - Page v2 | Bricks Academy

If you are seeing an element inside a specific v2 state change another state’s content, please send the Bricks data/export for that page.

Regards,
Jenn

1 Like