Flx Modernize12. Storefront: what changes with a store
Steps 1 to 11 built a renderer for Twenty Twenty-Five, a block theme with no shop. Steps 12 to 17 do it again for Storefront, a classic theme running WooCommerce. A store changes three things:
| Twenty Twenty-Five | Storefront with WooCommerce | |
|---|---|---|
| Where the page's middle comes from | Data fields the renderer draws | WooCommerce's own templates, sent as HTML |
| CSS and scripts | The renderer's own CSS | The theme's and WooCommerce's, which the shop's scripts rely on |
| Personal data | None on a public page | A cart, on any page, and addresses and passwords on some pages |
The method is the same as before: measure from the start, change one thing, and let CI say whether it worked.
The order we worked in
| Step | What it does | Result |
|---|---|---|
| 13. Catalogue pages | Shop, categories, tags, products and home through Flx | Fidelity 99.9% / 99.7%, gate at 95% per page |
| 14. Shoppers with a cart | They stay on Flx, and no cart data leaves | Their pages are byte-identical to a no-cart visitor's |
| 15. Sections in TypeScript | Product cards and product pages as functions | A new design, with add to cart still working |
| 16. Cart, Checkout, My account | The design continues around WooCommerce's forms | A real order placed through it in CI |
| 17. Go live, and your own store | Deploying, and what carries over to another store |
The safety rule that shapes everything
Any doubt means normal WordPress. Each step adds a way for a page to go through Flx, and each has a condition that sends it back: a template that isn't a reviewed version, a notice waiting in the session, a theme that throws. A store that falls back looks a little different, but it still sells.
So the first thing built was the guard, before any page was rendered. With WooCommerce active and no opt-in, every store page and every visitor with a cart stays normal WordPress. That shipped in plugin 1.7.0, and rendering store pages comes with a site's opt-in, FLX_MODERNIZE_WOOCOMMERCE, since 1.8.0.
Set up the test site
As in step 1, everything runs on a throwaway WordPress in CI, never against a live site. Pin the versions, because the plugin reviews templates by version:
- WordPress 7.1, WooCommerce 11.2.1, Storefront 4.6.2
- WooCommerce's sample products (
sample-data/sample_products.xml) - Storefront's homepage template as the static front page
One trap: WooCommerce's related products are random, which looks like a fidelity failure on every run. Our CI uses a small must-use plugin to make them fixed.
Next: 13. Catalogue pages.
Published from rickey29/twenty-twenty-five at commit 837705d · Flx Modernize 1.11.0 · Flx Render 1.11.0