5a4e2bab06
## Issue 1: Submenu Hidden in WP-Admin Modes ✅ **Problem:** Tax and Customer submenus visible in standalone but hidden in wp-admin modes **Root Cause:** Incorrect `top` positioning calculation - Was: `top-[calc(7rem+32px)]` (112px + 32px = 144px) - Should be: `top-16` (64px - header height) **Fixed:** - `DashboardSubmenuBar.tsx` - Updated positioning - `SubmenuBar.tsx` - Updated positioning **Result:** Submenus now visible in all modes ✅ --- ## Issue 2: Inconsistent Title in Standalone ✅ **Problem:** Title should prioritize: Logo → Store Name → WooNooW **Fixed:** - `StandaloneAdmin.php` - Use `woonoow_store_name` option first - Falls back to `blogname`, then "WooNooW" --- ## Issue 3: Dense Card Header on Mobile ✅ **Problem:** Card header with title, description, and button too cramped on mobile **Solution:** Stack vertically on mobile, horizontal on desktop **Fixed:** - `SettingsCard.tsx` - Changed from `flex-row` to `flex-col sm:flex-row` - Button now full width on mobile, auto on desktop **Result:** Better mobile UX, readable spacing ✅ --- ## Issue 4: Missing "Go to WP Admin" Link ✅ **Added:** - New button in More page (wp-admin modes only) - Positioned before Exit Fullscreen/Logout - Uses `ExternalLink` icon - Links to `/wp-admin/` --- ## Issue 5: Customer Settings 403 Error ⚠️ **Status:** Backend ready, needs testing - `CustomerSettingsProvider.php` exists and is autoloaded - REST endpoints registered in `StoreController.php` - Permission callback uses `manage_woocommerce` **Next:** Test endpoint directly to verify --- ## Issue 6: Dark Mode Logo Support ✅ **Added:** - New field: `store_logo_dark` - Stored in: `woonoow_store_logo_dark` option - Added to `StoreSettingsProvider.php`: - `get_settings()` - Returns dark logo - `save_settings()` - Saves dark logo **Frontend:** Ready for implementation (use `useTheme()` to switch) --- ## Issue 7: Consistent Dark Background ✅ **Problem:** Login and Dashboard use different dark backgrounds - Login: `dark:from-gray-900 dark:to-gray-800` (pure gray) - Dashboard: `--background: 222.2 84% 4.9%` (dark blue-gray) **Solution:** Use design system variables consistently **Fixed:** - `Login.tsx` - Changed to `dark:from-background dark:to-background` - Card background: `dark:bg-card` instead of `dark:bg-gray-800` **Result:** Consistent dark mode across all screens ✅ --- ## Summary ✅ **Fixed 6 issues:** 1. Submenu visibility in all modes 2. Standalone title logic 3. Mobile card header density 4. WP Admin link in More page 5. Dark mode logo backend support 6. Consistent dark background colors ⚠️ **Needs Testing:** - Customer Settings 403 error (backend ready, verify endpoint) **Files Modified:** - `DashboardSubmenuBar.tsx` - `SubmenuBar.tsx` - `StandaloneAdmin.php` - `SettingsCard.tsx` - `More/index.tsx` - `StoreSettingsProvider.php` - `Login.tsx` **All UI/UX polish complete!** 🎨
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.