Adding woocommerce
class to the <body>
when using WooCommerce Blocks
#51098
Replies: 1 comment
-
Thanks for starting this discussion, @octaedro! It's a very interesting topic which I don't think has a perfect solution. My main concern with adding I personally feel it's safer to add the In the end, we should encourage styling WooCommerce blocks via global styles (using the Site Editor UI or the |
Beta Was this translation helpful? Give feedback.
-
I wanted to open up a discussion around the recent fix in PR #51023 that addressed some visual issues with the variation selector on the front end. While the fix improves the appearance of the variation selector, it also raises a broader concern about how we apply WooCommerce-related classes, particularly the
woocommerce
class, to pages containing our blocks.Currently, we add the following classes to the page's
body
:product
andshop
pages.The other
posts
andpages
don't have the mentioned classes above.In the PR comments (and especially in a Slack thread with @ObliviousHarmony ), we discussed the potential benefits and challenges of automatically adding the
woocommerce
,woocommerce-account
,woocommerce-cart
andwoocommerce-checkout
classes to the<body>
whenever one of those blocks is present on a page or post. This approach could help maintain consistency in styling, but it also brings up some points for consideration:Impact on Third-Party Extensions: There is a risk that third-party developers might find WooCommerce styles unexpectedly applied to their extensions, potentially leading to compatibility issues.
Class Specificity Conflicts: We also need to consider scenarios where multiple WooCommerce blocks are used on the same page (e.g., a
Single Product
block and aCheckout
block). Determining which class should take precedence, or if both should be applied, is crucial to avoid CSS conflicts.Backward Compatibility: Many themes and extensions rely on the existing behavior, and any changes could introduce breaking changes, particularly on pages like the Cart, Checkout, and Account pages, which use specific classes like
woocommerce-cart
,woocommerce-checkout
, andwoocommerce-account
.Given these considerations, it would make sense to explore the idea of adding the
woocommerce
class to the<body>
tag for pages that include WooCommerce blocks. However, we need to ensure that this solution is robust and minimizes the risk of unintended side effects.Key Questions
What criteria should we use to determine when and which classes should be applied to the
<body>
tag?How can we ensure backward compatibility while implementing this change?
Are there any specific testing strategies or edge cases we should consider before rolling out such a change?
Looking forward to hearing your thoughts and feedback on this.
Beta Was this translation helpful? Give feedback.
All reactions