imranhsayed / nextjs-woocommerce-restapi

A React WooCommerce Project Example With REST API
nextjs-woocommerce-restapi-virid.vercel.app
MIT License
327 stars 101 forks source link
cart checkout-page decoupled headless headless-wordpress-framework nextjs nextjs-woocommerce-restapi-example reactjs restapi stripe woocommerce wordpress

🎨 Next.js WooCommerce REST API

Project Status: Active. Stars Forks Contributors Follow

Features

Tutorial Course

Live Demo Link

Setup

First clone/fork the repo and cd into it.

git clone https://github.com/imranhsayed/nextjs-woocommerce-restapi.git
cd nextjs-woocommerce-restapi
npm ci
npm run dev

Add Headless features for WordPress

Configuration :wrench:

  1. (Required) Create a .env file taking reference from .env-example and update your WordPressSite URL and Frontend next.js URL.

    • NEXT_PUBLIC_WORDPRESS_URL=https://example.com
    • NEXT_PUBLIC_SITE_URL=http://localhost.com ( This will be your frontend Next.js URL)
  2. Add your WC_CONSUMER_KEY and WC_CONSUMER_SECRET to the .env by following WooCommerce > Settings > Advanced > REST API

  3. In your WordPress Dashboard, Go to Settings > General > Site Address (URL) ( Set this to Frontend URL e.g. http://localhost:3000 during development )

  4. Create the Header and Footer Menus In WordPress Dashboard and set them to HCMS Header menu and HCMS Footer Menu respectively.

Useful Links

Versioning :bookmark_tabs:

I use Git for versioning.

Author :bust_in_silhouette:

License :page_with_curl:

This project is licensed under the MIT License - see the LICENSE.md file for details