Not really a surprise, we saw it coming for several years, and it’s not necessarily a bad thing lowering technology barriers for WordPress users, but in practice what is the gain of multiple inline CSS rules, instead of one properly made external CSS sheet.
Similarly, fixing the wrongly collapsing navigation menu on mobile is just a matter of adjusting a number in a media query, but there is no fucking way to do that in the UI.
What’s the gain of writing myriads of JavaScript rules to be able to change a CSS variable, which you could do by simply changing a variable in the CSS file. It’s a loss for the developers and a gain for the noobs, the marketeers and the trackers. It’s like taking your car the drive to your postbox to empty it.
But it’s an efficiency loss for the web in general. Pushing and forcing JavaScript for these things is simply wrong.
Anyhow when you develop a new site with the new 2024 theme, you can get far by clicking and dragging your mouse, but I can assure you, when you do that a couple of times and tried out several themes, headers, layout and patterns, there comes a moment headers and footers are lost or different on the WooCommerce pages.
Why and how you should fixed this with the UI/ Visual Editor, is quite obscure, but using the code editor, it’s a matter of fixing the first and last row in a WooCommerce page:
Do a site edit and not a page edit on a Woocommerce page and enable the code editor in the right top settings and change this
<!-- wp:template-part {"slug":"header","theme":"twentytwentyfour"} /--> to<!-- wp:template-part {"slug":"header","theme":"<your_theme_name>"} /-->
Vice versa for the footer.
I don’t know why the checkout page in WooCommerce has a different header the the other shop pages, (and no footer by default) but simply change this
<!-- wp:template-part {"slug":"checkout-header","theme":"woocommerce/woocommerce","tagName":"header"} /-->to
<!-- wp:template-part {"slug":"header","theme":"<your_theme_name>"} /-->