Awesome Open Source
Awesome Open Source

WooCommerce Nextjs React Theme 🚀

Project Status: Active. Stars Forks Contributors Follow

  • This is a React WooCommerce theme, built with Next JS, Webpack, Babel, Node, GraphQl

📹 Full Course Video Tutorial

Important Note ⭐:

The code for the Video Tutorial is in the branch youtube-course However, since there is continuous contribution and updates to this project. The 'master' branch is upto date with those changes. You can also refer to the PR notes for changes.

Demo Desktop 📹

Live Demo:

Live Demo Site

Checkout Page Demo

Payment Demo ( Paypal example )

Order Received Demo

Stripe Checkout

Stripe Demo Video


  1. WooCommerce Store in React( contains: Products Page, Single Product Page, AddToCart, CartPage and Checkout Page with country selection ).
  2. SSR
  3. SEO friendly
  4. Automatic Code Splitting
  5. Hot Reloading
  6. Prefetching
  7. Incremental Static (Re)generation ( Next.js 10 support )
  8. GraphQL with Apollo Client
  9. Tailwindcss
  10. Stripe Checkout ( with Stripe Session and Stripe webhook)

Getting Started 🚀

These instructions will get you a copy of the project up and running on your local machine for development purposes.

Prerequisites 📄

Installing 🔧

  1. Clone this repo using terminal git clone [email protected]:imranhsayed/woo-next
  2. cd woo-next
  3. yarn install

Add GraphQl support for WordPress

  1. Download and activate the following plugins , in your WordPress plugin directory:
  • wp-graphql Exposes graphql for WordPress ( Tested with v-1.3.8 of this plugin )

  • wp-graphql-woocommerce Adds Woocommerce functionality to a WPGraphQL schema ( Tested with v-0.8.1 of this plugin )

  • headless-cms Extends WPGraphQL Schema ( Tested with v-1.8.0 of this plugin )

  • Make sure Woocommerce plugin is also installed in your WordPress site. You can also import default wooCommerce products that come with wooCommerce Plugin for development ( if you don't have any products in your WordPress install ) WP Dashboard > Tools > Import > WooCommerce products(CSV): The WooCommerce default products csv file is available at wp-content/plugins/woocommerce/sample-data/sample_products.csv

Hero Carousel.

To use Hero carousel, create a category called 'offers' from WordPress Dashboard > Products > Categories. Now create and assign as many child categories to this parent 'offers' category with name, description and image. These Child categories data will automatically be used to create hero carousel on the frontend.

Configuration(for GraphQL implementation) 🔧

  • Note Below is for GraphQL implementation , for REST API check feature/rest-api branch
  1. (Required) Create a .env file taking reference from .env-example and update your WordPressSite URL.

Branch details

  1. feature/rest-api Contains REST API Implementation.

  2. The master branch has the GraphQL implementation.

Common Commands 💻

  • dev Runs server in development mode

Code Contributors ✰

Thanks to all the people who contributed to the code of this project 🤝

Imran Sayed Daniel F Fandi Rahmawan yudyananda

Contributing 👥

Please read for details on our code of conduct, and the process for submitting pull requests to us.

Versioning 📑

I use Git for versioning.

Author 👤

License 📃

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

Alternatives To Woo Next
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,156,493
Express (32,847
Wordpress (29,680
Webpack (23,943
Rest Api (17,978
Graphql (16,387
Nextjs (14,650
Babel (8,002
Apollo (4,497
Hero (3,194
Woocommerce (2,695
Carousel (2,481
Woocommerce Theme (32
React Theme (17
React Wordpress Theme (9
Headless Wordpress Framework (4