docs(example): Next - WooCommerce basic example #361

alexwpengine · 2025-08-05T13:56:40Z

Description

WooCommerce basic example - add/remove/update item in cart, checkout, my account, coupons, basic validations.

Plugins Required

WooCommerce. No add-ons.
WPGraphQL
WooGraphQL
WPGraphQL Headless Login

Pages

Header navigation - add Cart, My account as icons. List added Cart items under Cart.
Shop Page - list products (with load more button) with add to cart button and simple filter and ordering
Product Page - simple add to cart, display basic info - title, desc, price, quantity, attributes
support simple, grouped, variable products
Product Cat Pages - same as shop page/reusing the product-card component.
Cart - add/remove, order subtotal/total
Checkout - simple validation
Order Received/Thank you page - display order summary.
My account - billing, shipping fields, orders, core user info (password, email).

Core functionality

Add/remove/update from cart and mini-cart and checkout
Off Canvas Cart - quantity update, remove item, clear cart, refresh cart.
Checkout validation
Checkout payment with default payments - CoD, Bank transfer etc. No stripe, paypal etc.
User registration and login (authentication)
Apply coupon codes and discounts.
Template Hierarchy

Related Issue

Dependant PRs

Type of Change

✅ Bug fix (non-breaking change which fixes an issue)
✨ New feature (non-breaking change which adds functionality)
💥 Breaking change (fix or feature that would cause existing functionality to change)
🧹 Code refactoring (no functional changes)
📄 Example update (no functional changes)
📝 Documentation update
🔍 Performance improvement
🧪 Test update

How Has This Been Tested?

Screenshots

Checklist

I have read the CONTRIBUTING document
My code follows the project's coding standards
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation (if applicable)
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works (if applicable)
Any dependent changes have been highlighted, merged or published

changeset-bot · 2025-08-05T13:56:45Z

⚠️ No Changeset found

Latest commit: c85a016

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

alexwpengine · 2025-08-05T15:43:13Z

PR

Copilot

Pull request overview

This PR introduces a new WooCommerce integration example for Next.js, demonstrating headless WordPress setup with e-commerce functionality. The example includes template hierarchy implementation, authentication, cart management, and checkout functionality.

Key Changes:

Added complete WooCommerce example with Next.js Pages Router integration
Implemented WordPress template hierarchy system for dynamic routing
Created authentication and cart management providers with session handling

Reviewed changes

Copilot reviewed 106 out of 119 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
examples/nuxt/template-hierarchy-data-fetching/.wp-env.json	Updated development and test port numbers
examples/nuxt/template-hierarchy-data-fetching/example-app/nuxt.config.ts	Updated WordPress URL port to match new wp-env configuration
examples/next/woocommerce/package.json	Added package configuration with wp-env scripts and dependencies
examples/next/woocommerce/wp-env/setup/.htaccess	Added Apache configuration for CORS and WordPress permalinks
examples/next/woocommerce/wp-env/sample_products.csv	Added sample WooCommerce product data for development
examples/next/woocommerce/example-app/tsconfig.json	Added TypeScript configuration for the Next.js application
examples/next/woocommerce/example-app/src/wp-templates/*	Implemented WordPress template hierarchy templates
examples/next/woocommerce/example-app/src/lib/*	Added core utilities for GraphQL, authentication, and routing
examples/next/woocommerce/example-app/src/components/*	Created UI components for products, cart, checkout, and layout
examples/next/woocommerce/example-app/src/interfaces/*	Defined TypeScript interfaces for type safety

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

examples/next/woocommerce/example-app/src/components/OrderReceived/OrderReceived.tsx

examples/next/woocommerce/example-app/src/components/ui/Field.tsx

examples/next/woocommerce/example-app/src/components/Products/Price.tsx

examples/next/woocommerce/example-app/src/components/Checkout/CheckoutFields.tsx

examples/next/woocommerce/example-app/src/components/Products/SingleProduct.tsx

examples/next/woocommerce/README.md

ahuseyn · 2025-12-03T10:50:24Z

Thanks @alexwpengine, thats an impressively comprehensive example. I've tested locally and everything seems to work nicely, except the suggestions I've placed above.
Also you might want to know that the images do not appear when you do the clean install:

…ived/OrderReceived.tsx Co-authored-by: Copilot <[email protected]>

…SingleProduct.tsx Co-authored-by: Huseyn Aghayev <[email protected]>

alexwpengine · 2025-12-03T17:50:11Z

Thanks @alexwpengine, thats an impressively comprehensive example. I've tested locally and everything seems to work nicely, except the suggestions I've placed above. Also you might want to know that the images do not appear when you do the clean install:

Ready. All points are resolved. Did also some improvements. Removed the screenshots, not sure if its needed.

Copilot

Pull request overview

Copilot reviewed 107 out of 119 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

examples/next/woocommerce/example-app/src/lib/templates/templates.js

examples/next/woocommerce/example-app/src/components/Account/Tabs/Orders.tsx

examples/next/woocommerce/example-app/src/components/Cart/MiniCart.tsx

examples/next/woocommerce/example-app/src/wp-templates/page-order-received.js

examples/next/woocommerce/example-app/src/components/Products/Grouped.tsx

Copilot

Pull request overview

Copilot reviewed 107 out of 119 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

examples/next/woocommerce/example-app/src/lib/getApolloClient.js

+import { GetCartDocument } from "./graphQL/userGraphQL";
+import { GraphQLClient } from "graphql-request";
+import { setContext } from "@apollo/client/link/context";
+const baseUrl = process.env.NEXT_PUBLIC_WORDPRESS_URL || "http://localhost:8890";


Copilot · 2025-12-03T17:59:47Z

examples/next/woocommerce/example-app/src/components/Products/Variations.tsx

+
+
+                                        return (
+                                            <button
+                                                key={option}
+                                                onClick={() => onAttributeSelect(attr.name, option)}
+                                                className={`px-4 py-2 border rounded-lg text-sm font-medium transition-all ${
+                                                    isSelected
+                                                        ? "bg-blue-600 text-white border-blue-600"
+
+                                                        : "bg-white hover:bg-gray-50 border-gray-300 text-gray-500 opacity-60"
+                                                }`}
+                                            >
+                                                {option}                                             
+


All options receive the same styling (line 95) regardless of whether they're available based on the availableOptions filter. Non-available options should have distinct visual styling (e.g., different opacity, disabled cursor) to indicate they cannot be selected with the current attribute combination.

Suggested change

return (

<button

key={option}

onClick={() => onAttributeSelect(attr.name, option)}

className={`px-4 py-2 border rounded-lg text-sm font-medium transition-all ${

isSelected

? "bg-blue-600 text-white border-blue-600"

: "bg-white hover:bg-gray-50 border-gray-300 text-gray-500 opacity-60"

}`}

>

{option}

const isAvailable = availableOptions.includes(option);

return (

<button

key={option}

onClick={() => isAvailable && onAttributeSelect(attr.name, option)}

className={`px-4 py-2 border rounded-lg text-sm font-medium transition-all ${

isSelected

? "bg-blue-600 text-white border-blue-600"

: isAvailable

? "bg-white hover:bg-gray-50 border-gray-300 text-gray-500"

: "bg-white border-gray-300 text-gray-400 opacity-50 cursor-not-allowed"

}`}

disabled={!isAvailable}

aria-disabled={!isAvailable}

>

{option}

examples/next/woocommerce/example-app/src/components/Products/Variations.tsx

Copilot · 2025-12-03T17:59:48Z

examples/next/woocommerce/example-app/src/components/Checkout/CheckoutFields.tsx

+                                    value={formData.shipping[field.id.replace("shipping_", "").replace(/_([a-z])/g, (_, l) => l.toUpperCase()) as keyof typeof formData.shipping] || ""}
+                                    onChange={(value) => handleFieldChange(field.id, value)}
+                                    placeholder={field.label}
+                                    error={errors[field.id]}


The error prop is passed to UserField component, but the UserField interface in Field.tsx (lines 3-13) doesn't include an error prop, which will cause a type mismatch.

…Variations.tsx Co-authored-by: Copilot <[email protected]>

WIP

678ac3c

alexwpengine requested a review from a team as a code owner August 5, 2025 13:56

alexwpengine self-assigned this Aug 5, 2025

Merge branch 'main' into example-next-woocommerce

862398e

alexwpengine added this to Headless OSS Aug 5, 2025

github-project-automation bot moved this to 🆕 Backlog in Headless OSS Aug 5, 2025

alexwpengine linked an issue Aug 5, 2025 that may be closed by this pull request

Examples: Add WooCommerce into examples #357

Open

alexwpengine added 17 commits August 13, 2025 18:37

WIP

09d1302

WIP

a8fdc1a

WIP

76cb863

WIP

1085b7c

progress

aaa7735

auth finalized

2f2e328

new update

501751a

cart rdy

d921e4b

product and templates and optimizations

7e11ae1

my account rdy

bf2a884

Checkout ongoing

dc8bd39

variations

0cc1223

optimizing it as TypeScript

d68f792

checkout for guest and order received

df09a79

order received rdy

f6d4694

grouped products, clear up code, update db

a1e7f8c

update .env desc

36082d1

ahuseyn requested a review from Copilot December 3, 2025 10:33

Copilot AI reviewed Dec 3, 2025

View reviewed changes

ahuseyn reviewed Dec 3, 2025

View reviewed changes

examples/next/woocommerce/example-app/src/components/Products/SingleProduct.tsx Outdated Show resolved Hide resolved

ahuseyn reviewed Dec 3, 2025

View reviewed changes

examples/next/woocommerce/README.md Show resolved Hide resolved

alexwpengine and others added 3 commits December 3, 2025 14:32

Update examples/next/woocommerce/example-app/src/components/OrderRece…

b620ae6

…ived/OrderReceived.tsx Co-authored-by: Copilot <[email protected]>

Update examples/next/woocommerce/example-app/src/components/Products/…

eadea27

…SingleProduct.tsx Co-authored-by: Huseyn Aghayev <[email protected]>

improvements

e4d71cc

alexwpengine changed the title ~~[WIP] docs(example): Next - WooCommerce basic example~~ docs(example): Next - WooCommerce basic example Dec 3, 2025

alexwpengine requested review from ahuseyn and Copilot December 3, 2025 17:52

Copilot AI reviewed Dec 3, 2025

View reviewed changes

remove console logs

bc55833

alexwpengine requested a review from Copilot December 3, 2025 17:58

Copilot AI reviewed Dec 3, 2025

View reviewed changes

Update examples/next/woocommerce/example-app/src/components/Products/…

c85a016

…Variations.tsx Co-authored-by: Copilot <[email protected]>

docs(example): Next - WooCommerce basic example #361

Are you sure you want to change the base?

docs(example): Next - WooCommerce basic example #361

Uh oh!

Conversation

alexwpengine commented Aug 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Plugins Required

Pages

Core functionality

Related Issue

Dependant PRs

Type of Change

How Has This Been Tested?

Screenshots

Checklist

Uh oh!

changeset-bot bot commented Aug 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

alexwpengine commented Aug 5, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ahuseyn commented Dec 3, 2025

Uh oh!

alexwpengine commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

This comment was marked as off-topic.

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alexwpengine commented Aug 5, 2025 •

edited

Loading

changeset-bot bot commented Aug 5, 2025 •

edited

Loading

alexwpengine commented Dec 3, 2025 •

edited

Loading