9b0b2b53f9
Problem Analysis:
1. Sticky header had no gap with first card
2. Sticky header not staying sticky when scrolling in WP-Admin
Root Cause:
The sticky header is inside a scrollable container:
<main className="flex-1 p-4 overflow-auto">
<SettingsLayout>
<div className="sticky top-[49px]"> ← Wrong!
When sticky is inside a scrollable container, it sticks relative
to that container, not the viewport. The top offset should be
relative to the scrollable container's top, not the viewport.
Solution:
1. Changed sticky position from top-[49px] to top-0
- Sticky is relative to scrollable parent (<main>)
- top-0 means stick to top of scrollable area
2. Added mb-6 for gap between header and content
- Prevents header from touching first card
- Maintains consistent spacing
Before:
<div className="sticky top-[49px] ...">
↑ Trying to offset from viewport (wrong context)
After:
<div className="sticky top-0 mb-6 ...">
↑ Stick to scrollable container top (correct)
↑ Add margin for gap
Layout Structure:
┌─────────────────────────────────────┐
│ WP Admin Bar (32px) │
├─────────────────────────────────────┤
│ WP Menu (112px) │
├─────────────────────────────────────┤
│ Submenu Bar (49px) - sticky │
├─────────────────────────────────────┤
│ <main overflow-auto> ← Scroll here │
│ ┌─────────────────────────────┐ │
│ │ Sticky Header (top-0) │ │ ← Sticks here
│ ├─────────────────────────────┤ │
│ │ Gap (mb-6) │ │
│ ├─────────────────────────────┤ │
│ │ First Card │ │
│ │ Content... │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
Result:
✅ Sticky header stays at top when scrolling
✅ Gap between header and content (mb-6)
✅ Works in both fullscreen and WP-Admin modes
✅ Edge-to-edge background maintained
Files Modified:
- SettingsLayout.tsx: Simplified sticky positioning
WooNooW
WooNooW is a modern experience layer for WooCommerce — enhancing UX, speed, and reliability without data migration.
It keeps WooCommerce as the core engine while providing a modern React-powered interface for both the storefront (cart, checkout, my‑account) and the admin (orders, dashboard).
Three Admin Modes:
- Normal Mode: Traditional wp-admin integration (
/wp-admin/admin.php?page=woonoow) - Fullscreen Mode: Distraction-free interface (toggle in header)
- Standalone Mode: Complete standalone app at
yoursite.com/adminwith custom login ✨
🔍 Background
WooCommerce is the most used e‑commerce engine in the world, but its architecture has become heavy and fragmented.
With React‑based blocks (Checkout, Cart, Product Edit) and HPOS now rolling out, many existing addons are becoming obsolete or unstable.
WooNooW bridges the gap between Woo’s legacy PHP system and the new modern stack — so users get performance and simplicity without losing compatibility.
🚀 Key Principles
- No Migration Needed – Woo data stays intact.
- Safe Activate/Deactivate – revert to native Woo anytime, no data loss.
- Hybrid by Default – SSR + React islands for Cart/Checkout/My‑Account.
- Full SPA Toggle – optional React‑only mode for max performance.
- HPOS Mandatory – optimized datastore and async operations.
- Compat Layer – hook mirror + slot rendering for legacy addons.
- Async Mail & Tasks – powered by Action Scheduler.
🧱 Tech Stack
| Layer | Technology |
|---|---|
| Backend | PHP 8.2+, WordPress, WooCommerce (HPOS), Action Scheduler |
| Frontend | React 18 + TypeScript, Vite, React Query, Tailwind (optional) |
| Build & Package | Composer, NPM, ESM scripts, Zip automation |
| Architecture | Modular PSR‑4 classes, REST‑driven SPA islands |
🧩 Project Structure
woonoow/
├── admin-spa/
│ ├── src/
│ │ ├── components/
│ │ │ ├── filters/
│ │ │ │ ├── DateRange.tsx
│ │ │ │ └── OrderBy.tsx
│ │ │ └── CommandPalette.tsx
│ │ ├── hooks/
│ │ │ └── useShortcuts.tsx
│ │ ├── lib/
│ │ │ ├── api.ts
│ │ │ ├── currency.ts
│ │ │ ├── dates.ts
│ │ │ ├── query-params.ts
│ │ │ ├── useCommandStore.ts
│ │ │ └── utils.ts
│ │ ├── pages/
│ │ │ └── orders/
│ │ │ ├── partials
│ │ │ │ └── OrderForm.tsx
│ │ │ ├── Orders.tsx
│ │ │ ├── OrdersNew.tsx
│ │ │ └── OrderShow.tsx
│ │ ├── routes/
│ │ │ └── Dashboard.tsx
│ │ ├── types/
│ │ │ └── qrcode.d.ts
│ │ ├── App.tsx
│ │ ├── index.css
│ │ └── main.tsx
│ └── vite.config.ts
├── includes/
│ ├── Admin/
│ │ ├── Assets.php
│ │ └── Menu.php
│ ├── Api/
│ │ ├── CheckoutController.php
│ │ ├── OrdersController.php
│ │ ├── Permissions.php
│ │ └── Routes.php
│ ├── Compat/
│ │ ├── HideWooMenus.php
│ │ └── HooksShim.php
│ └── Core/
│ ├── DataStores/
│ │ ├── OrderStore_HPOS.php
│ │ └── OrderStore.php
│ ├── Mail/
│ │ ├── MailQueue.php
│ │ └── WooEmailOverride.php
│ ├── Bootstrap.php
│ └── Features.php
├── woonoow.php
└── docs (project notes, SOP, etc.)
⚙️ Development Workflow
- LocalWP / Docker setup with WordPress + WooCommerce.
- Activate plugin:
WooNooWshould appear in the admin menu. - Build SPAs:
npm run build - Package zip:
npm run pack - Upload
dist/woonoow.zipinto WordPress → Plugins → Add New → Upload.
🧭 Vision
“WooCommerce, reimagined for now.”
WooNooW delivers modern speed and UX while keeping WooCommerce’s ecosystem alive.
No migration. No lock‑in. Just Woo, evolved.