f7dca7bc28
**Issue: Third-Party Plugin Compatibility** Current Status: ❌ NOT IMPLEMENTED Priority: 🔴 CRITICAL - Blocks production readiness **Problem:** Our SPA admin does NOT expose: - Custom meta fields from third-party plugins - WordPress metaboxes (add_meta_box) - WooCommerce custom fields - ACF/CMB2/Pods fields - Plugin-injected data (e.g., Tracking Number) **Example Use Case:** Plugin: WooCommerce Shipment Tracking - Adds 'Tracking Number' metabox to order edit page - Stores: _tracking_number meta field - Current: ❌ NOT visible in WooNooW admin - Expected: ✅ Should be visible and editable **Impact:** 1. Breaks compatibility with popular plugins 2. Users cannot see/edit custom fields 3. Data exists but not accessible in SPA 4. Forces users back to classic admin 5. BLOCKS production readiness **Solution Architecture:** Phase 1: API Layer (2-3 days) - Expose meta_data in OrdersController::show() - Expose meta_data in ProductsController::get_product() - Add filters: woonoow/order_api_data, woonoow/product_api_data - Add filters: woonoow/order_allowed_private_meta - Add actions: woonoow/order_updated, woonoow/product_updated Phase 2: Frontend Components (3-4 days) - Create MetaFields.tsx component - Create useMetaFields.ts hook - Update Orders/Edit.tsx to include meta fields - Update Products/Edit.tsx to include meta fields - Add meta fields to detail pages Phase 3: Plugin Integration (2-3 days) - Create MetaFieldsRegistry.php - Add woonoow/register_meta_fields action - Localize fields to JavaScript - Create example: ShipmentTracking.php integration - Document integration pattern **Documentation Created:** - METABOX_COMPAT.md - Complete implementation guide - Includes code examples for all phases - Includes third-party integration guide - Includes testing checklist **Updated:** - PROJECT_SOP.md - Added metabox compat reference - Marked as CRITICAL requirement - Noted as blocking production readiness **Timeline:** Total: 1-2 weeks implementation **Blocking:** - ✅ Coupons CRUD (can proceed) - ✅ Customers CRUD (can proceed) - ❌ Production readiness (BLOCKED) **Next Steps:** 1. Review METABOX_COMPAT.md 2. Prioritize implementation 3. Start with Phase 1 (API layer) 4. Test with popular plugins (Shipment Tracking, ACF)
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.