Woo Next

Overview:

The WooCommerce Nextjs React Theme is a React-based theme for creating an e-commerce store using WooCommerce. It is built with Next JS, Webpack, Babel, Node, and GraphQL. The theme features a full course video tutorial and includes various demo pages for checkout, payment, and order received. It offers features such as SSR (Server-Side Rendering), automatic code splitting, hot reloading, prefetching, incremental static (re)generation, GraphQL with Apollo Client, Tailwindcss, and Stripe Checkout integration.

Features:

• WooCommerce Store in React with various pages including Products Page, Single Product Page, AddToCart, CartPage, and Checkout Page with country selection.
• SSR (Server-Side Rendering) for improved performance and SEO optimization.
• Automatic Code Splitting to reduce bundle size and improve loading speed.
• Hot Reloading for faster development and easier debugging.
• Prefetching to improve the user experience by loading data in advance.
• Incremental Static (Re)generation with Next.js 10 support for faster page generation.
• GraphQL with Apollo Client for efficient data fetching and management.
• Tailwindcss for a customizable and responsive design.
• Stripe Checkout integration with support for Stripe Session and Stripe webhook.

Installation:

To install the WooCommerce Nextjs React Theme, follow these steps:

1. Clone this repo using terminal: git clone git@github.com:imranhsayed/woo-next

2. Change to the cloned directory: cd woo-next

3. Install the required dependencies: yarn install

4. Add GraphQL support for WordPress. 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.

5. Import default WooCommerce products for development (if you don’t have any products):

   • Go to 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.

6. To use the Hero Carousel feature:

   • Create a category called “offers” from WordPress Dashboard > Products > Categories.
   • Create child categories within the “offers” category with name, description, and image. These child categories will be used to create the Hero Carousel on the frontend.

Summary:

The WooCommerce Nextjs React Theme is a powerful and feature-rich theme for building e-commerce stores with React and WooCommerce. It offers a wide range of functionalities, including SSR, automatic code splitting, hot reloading, prefetching, and incremental static (re)generation. With its GraphQL support and integration with Stripe Checkout, the theme provides efficient data management and secure payment processing. The theme also includes a detailed installation guide to help developers set up the project on their local machines.