Headless WooCommerce storefront — Next.js frontend connected to WooCommerce + Stripe
| Area | Detail |
|---|---|
| Headless architecture | Next.js → WooCommerce REST API wired up |
| Shared authentication | NextAuth session cookie on .train5d.com domain |
| Auth redirect stubs | /auth/login and /auth/register redirect to main auth |
| WP admin access | Custom login URL at shop.train5d.com/login — no plugin needed |
| WP login branding | Matches Next.js auth form (Poppins, pill inputs, logo) |
| Maintenance page | 503 page live — admins bypass automatically |
| Stripe integration | Checkout flow with Stripe Elements |
| Product pages | /product/[slug].tsx — PDP with variants |
| Category pages | /shop/[category].tsx |
| Cart | Client-side cart with WooCommerce sync |
| Order confirmation | Post-purchase page |
| Account dashboard | /account/index.tsx |
| Order history | /account/orders.tsx |
| Shipping rates | Custom REST endpoint in mu-plugin → WooCommerce calculator |
| Image migration | R2 migration script (migrate-images-to-r2.py) |
| Klaviyo | Plugin installed on WP backend |
| Redis cache | Plugin installed on WP backend |
| SEO | Rank Math installed on WP backend |
| Area | Item |
|---|---|
| Auth | Convert /auth/login to redirect stub (like training/blog) |
| Auth | Convert /auth/register to redirect stub |
| Product Feeds | Collect API credentials — see credentials checklist |
| Product Feeds | Build Node.js sync script → Meta/Facebook catalog |
| Product Feeds | Build Node.js sync script → Pinterest catalog |
| Product Feeds | Build Node.js sync script → Google Merchant Center |
| Product Feeds | Set up nightly cron / PM2 scheduled jobs |
| Storefront UI | Homepage hero / featured products section |
| Storefront UI | Search / filter on category pages |
| Storefront UI | Product image gallery (multiple images, zoom) |
| Storefront UI | Reviews / ratings display |
| Storefront UI | Upsells / related products on PDP |
| Storefront UI | Wishlist / save for later |
| Checkout | Guest checkout flow |
| Checkout | Coupon / discount code field |
| Checkout | Address autocomplete |
| Checkout | Order tracking page |
| Account | Profile edit (name, email, password) |
| Account | Saved addresses |
| Account | Reorder from order history |
| Klaviyo order confirmation flow | |
| Abandoned cart + win-back sequences | |
| Ops | Production deployment pipeline & domain cutover plan |
WooCommerce runs on production server 64.225.9.200 as a data/order backend only. The Next.js app is the customer-facing frontend. Users log in once at dev.train5d.com/auth/login — session cookie works across all subdomains.
| Component | Detail |
|---|---|
| Server | 64.225.9.200 — DigitalOcean Droplet |
| Path | /var/www/shop.train5d.com/public_html/ |
| Custom login URL | shop.train5d.com/login — handled in mu-plugin (no plugin) |
| Maintenance mode | 503 for non-admins via t5d-maintenance.php |
| Shipping rates | Custom REST endpoint /wp-json/train5d/v1/shipping-rates |
| Plugins | WooCommerce, Klaviyo, Redis Cache, Rank Math |
/app)| Path | Purpose |
|---|---|
pages/index.tsx | Homepage / storefront |
pages/shop/[category].tsx | Category listing page |
pages/product/[slug].tsx | Product detail page with variants |
pages/cart.tsx | Shopping cart |
pages/checkout.tsx | Stripe checkout |
pages/order-confirmation.tsx | Post-purchase page |
pages/account/index.tsx | Account dashboard |
pages/account/orders.tsx | Order history |
pages/auth/login.tsx | Login (redirects to dev.train5d.com) |
pages/auth/register.tsx | Register (redirects to dev.train5d.com) |
pages/admin/login.tsx | WP admin redirect |
pages/api/ | API routes: auth, checkout, promos |
middleware.ts | Auth guard for /account and /admin |
ecosystem.config.cjs | PM2 process config |
/public_html)| Path | Purpose |
|---|---|
wp-content/mu-plugins/train5d-headless.php | Custom login URL slug, shipping REST endpoint, branded login CSS/JS |
wp-content/mu-plugins/t5d-maintenance.php | Maintenance mode (503) with admin bypass |
wp-content/plugins/woocommerce/ | WooCommerce core |
wp-content/plugins/klaviyo/ | Email marketing integration |
wp-content/plugins/redis-cache/ | Object cache |
wp-content/plugins/seo-by-rank-math/ | SEO |
| File | Purpose |
|---|---|
product-feed-credentials.md | API credentials checklist for Google / Meta / Pinterest feeds |
migrate-images-to-r2.py | Script to migrate WP media to Cloudflare R2 |
launch-plan.html | This file |
README.md | Plain text version of this plan |
cd /var/www/dev.shop.train5d.com/app
npm run dev # Dev server
npm run build # Production build
pm2 restart shop-frontend # Restart (PM2 id: 57)
pm2 logs shop-frontend
pm2 statusssh root@64.225.9.200
cd /var/www/shop.train5d.com/public_html
# WP CLI
wp plugin list --allow-root
wp option get siteurl --allow-root
# mu-plugins (always active, no activation needed)
ls wp-content/mu-plugins/
# Edit custom mu-plugin
nano wp-content/mu-plugins/train5d-headless.phpBase URL: https://shop.train5d.com/wp-json/wc/v3
Products: GET /products
Orders: GET /orders
Shipping: POST /wp-json/train5d/v1/shipping-rates (custom)Credentials in app/.env.local as WC_CONSUMER_KEY and WC_CONSUMER_SECRET.
| File | Purpose |
|---|---|
app/.env.local | All secrets — NextAuth, WooCommerce, Stripe |
app/next.config.js | Next.js config, image domains |
app/middleware.ts | Auth protection for /account and /admin |
app/ecosystem.config.cjs | PM2 process config |
mu-plugins/train5d-headless.php | Custom login URL + shipping REST endpoint + login branding |
mu-plugins/t5d-maintenance.php | Maintenance mode |
.train5d.com cookie