Overview:

This product is a React WooCommerce theme that utilizes a decoupled architecture with Next.js. It features a backend in WordPress and a frontend in React, with data fetched through REST API. The theme includes various components like Home Page, Single Product Page with Gallery Carousel, Cart Page, Checkout Page with Stripe Payment Gateway integration, REST API endpoints, header and footer fetched from WordPress Menu items, support for WordPress Widgets and Yoast SEO, image optimization, static page generation, and more.

Features:

• Home Page
• Single Product Page with Gallery Carousel
• Cart Page
• Checkout Page with Stripe Payment Gateway Integration
• REST API endpoints
• Header and Footer in Next.js fetching from WordPress Menu Items
• WordPress Widgets displayed on Next.js frontend
• Yoast SEO support
• Incremental Static (Re)generation
• Gutenberg styles support
• Blog Page with Pagination
• Single Post and Pages
• 404 Page
• Display Comments and Post a Comment
• Next.js Image component with image optimization
• Authentication with JWT and Http Only Cookie implementation (Coming Soon)
• Login feature for WP Post Preview in Next.js (Coming Soon)
• Product Pagination and Load More Products (Coming Soon)

Installation:

1. First, clone/fork the repository and navigate into the directory.
2. Add headless features for WordPress.
3. Install and activate the following WordPress plugins: headless-cms, woocommerce.
4. Create a “.env” file referencing the “.env-example” file and update the WordPress Site URL and Frontend Next.js URL.

   NEXT_PUBLIC_WORDPRESS_URL=https://example.com
   NEXT_PUBLIC_SITE_URL=http://localhost.com
   

5. Add the WC_CONSUMER_KEY and WC_CONSUMER_SECRET to the .env file following WooCommerce > Settings > Advanced > REST API.
6. In the WordPress Dashboard, go to Settings > General > Site Address (URL) and set it to the frontend URL (e.g., http://localhost:3000 during development).
7. Create the Header and Footer menus in the WordPress Dashboard and assign them to HCMS Header menu and HCMS Footer Menu respectively.

Summary:

The React WooCommerce theme with a decoupled architecture in Next.js offers a range of features like REST API integration, static page generation, Gutenberg styles support, and more. With components for product pages, cart, checkout, comments, and future features like authentication and additional product handling, this theme provides a robust platform for e-commerce websites. Users can easily set up the theme by following the installation guide, integrating it with WordPress, and configuring necessary settings for seamless operation.