React Templates & Themes Logo React Templates & Themes
Nextjs Woocommerce screenshot

Nextjs Woocommerce

Author Avatar Theme by W3bdesign
Updated: 23 May 2025
531 Stars

Next.js (React) headless eCommerce site with Typescript, WordPress (WooCommerce) backend and Algolia search

Github Live Preview

Categories

Framer Nextjs Styled components Tailwind Ecommerce

Overview

The Next.js Ecommerce site with WooCommerce backend is a web application that allows users to create an ecommerce website using Next.js and WooCommerce. It provides various features such as listing products, cart handling, checkout, Algolia search, responsiveness, and more. The application has been tested with specific versions of WordPress, WooCommerce, WP GraphQL, and WooGraphQL.

Features

  • Next.js version 13.4.7 with React 18 and TypeScript
  • Integration with WooCommerce GraphQL API to list product name, price, and display image
  • Support for simple and variable products
  • Cart handling and checkout with WooCommerce (Cash On Delivery only)
  • Algolia search integration (requires algolia-woo-indexer)
  • Meets WCAG accessibility standards where possible
  • Placeholder for products without images
  • Apollo Client with GraphQL
  • React Hook Form for form validation
  • Animations with Framer Motion, Styled Components, and Animate.css
  • Loading spinner created with Styled Components
  • Shows page load progress with Nprogress during navigation
  • Fully responsive design
  • Category and product listings
  • Show stock status
  • Pretty URLs with built-in Next.js functionality
  • Styling with Tailwind CSS
  • JSDoc comments

Installation

  1. Install and activate the following required plugins in your WordPress plugin directory:
    • woocommerce (Ecommerce for WordPress)
    • wp-graphql (Exposes GraphQL for WordPress)
    • wp-graphql-woocommerce (Adds WooCommerce functionality to a WPGraphQL schema)
    • wp-algolia-woo-indexer (Sends WooCommerce products to Algolia, required for search to work)
  2. Optional: Install the headless-wordpress plugin to disable the frontend and only access the backend.
  3. Confirm compatibility with the following versions:
    • WordPress version 6.1.1
    • WooCommerce version 7.4.0
    • WP GraphQL version 1.13.8
    • WooGraphQL version 0.12.0
    • WPGraphQL CORS version 2.1
  4. For debugging and testing, install either the Apollo Developer Tools addon for Firefox or the Apollo Client Developer Tools extension for Chrome.
  5. Ensure that WooCommerce has some products already.
  6. Clone or fork the repo and modify .env.example to .env.
  7. Set the environment variables accordingly in Vercel or your preferred hosting solution.
  8. Follow the instructions at https://vercel.com/docs/environment-variables to modify the values according to your setup.
  9. Start the server with npm run dev.
  10. Enable the COD (Cash On Delivery) payment method in WooCommerce.
  11. Add a product to the cart.
  12. Proceed to checkout (Gå til kasse).
  13. Fill in your details and place the order.

Summary

The Next.js Ecommerce site with WooCommerce backend is a powerful web application that allows users to create ecommerce websites. It provides an extensive list of features including product listing, cart handling, checkout, Algolia search integration, accessibility standards compliance, and responsive design. The installation process requires the installation and activation of specific WordPress plugins and compatibility with certain versions. It is important to note that further testing and debugging is needed before deploying the application in a production environment.