ff485a889a
Fixed all issues from user feedback round 2. 1. OrderCard Layout - Icon Inline with 2 Lines Problem: Too much vertical space wasted, icon in separate column New Layout: ┌─────────────────────────────────┐ │ ☐ [Icon] Nov 04, 2025, 11:44 PM │ ← Line 1: Date (small) │ #337 →│ ← Line 2: Order# (big) │ Dwindi Ramadhana │ ← Line 3: Customer │ 1 item · Test Digital │ ← Line 4: Items │ Rp64.500 Completed │ ← Line 5: Total + Status └─────────────────────────────────┘ Changes: - Icon inline with first 2 lines (date + order#) - Date: text-xs, muted, top line - Order#: text-lg, bold, second line - Better space utilization - Reduced padding: p-4 → p-3 - Cleaner hierarchy Result: More compact, better use of horizontal space! 2. FilterBottomSheet Backdrop Margin Problem: Backdrop had top margin from parent space-y-4 Fix: - Added !m-0 to backdrop to override parent spacing - Backdrop now properly covers entire screen Result: Clean full-screen overlay! 3. DateRange Component Fixes Problem: - Horizontal overflow when custom dates selected - WP forms.css overriding input styles - Redundant "Apply" button Fixes: a) Layout: - Changed from horizontal to vertical (flex-col) - Full width inputs (w-full) - Prevents overflow in bottom sheet b) Styling: - Override WP forms.css with shadcn classes - border-input, bg-background, ring-offset-background - focus-visible:ring-2 focus-visible:ring-ring - WebkitAppearance: none to remove browser defaults - Custom calendar picker cursor c) Instant Filtering: - Removed "Apply" button - Added start/end to useEffect deps - Filters apply immediately on date change Result: Clean vertical layout, proper styling, instant filtering! 4. Filter Bottom Sheet UX Problem: Apply/Cancel buttons confusing (filters already applied) Industry Standard: Instant filtering on mobile - Gmail: Filters apply instantly - Amazon: Filters apply instantly - Airbnb: Filters apply instantly Solution: - Removed "Apply" button - Removed "Cancel" button - Keep "Clear all filters" button (only when filters active) - Filters apply instantly on change - User can close sheet anytime (tap backdrop or X) Result: Modern, intuitive mobile filter UX! Files Modified: - routes/Orders/components/OrderCard.tsx - routes/Orders/components/FilterBottomSheet.tsx - components/filters/DateRange.tsx Summary: ✅ OrderCard: Icon inline, better space usage ✅ Backdrop: No margin, full coverage ✅ DateRange: Vertical layout, no overflow, proper styling ✅ Filters: Instant application, industry standard UX ✅ Clean, modern, mobile-first! 🎯
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.