MetaShop- Headless WooCommerce React Theme

MetaShop- Headless WooCommerce React Theme

Teck Stack- Next.js, Typescript, Tailwind CSS and WooCommerce Rest API

headless woocommerce theme



A subscription entitles you to 1 year of updates and support from the date of purchase.


Aug 30, 2023


Dec 10, 2022


Headless Theme

0.00(0 Review)



Metashop - Headless WooCommerce Theme

Metashop is a headless WooCommerce theme powered by Next.js, TypeScript, Tailwind CSS, WordPress, and the WooCommerce REST API.

You can quickly start a scalable, lightning-fast loading eCommerce website.

👉 Nextjs as Frontend

Next.js and Tailwind CSS are used as the frontend and connected to the frontend via the REST API.

👉 WordPress as Backend

WordPress and WooCommerce are used as the backend and connected to the API via the REST API. You can manage products, contents, orders, blogs, and SEO from WordPress.

Project Structure

The project is structured based on the monorepo Turborepo, and it includes the following packages:

  • apps/site: This package contains the main site built with Next.js. You will deploy the site package.
  • packages/checkout-flow: This package is used for the Checkout page UI.
  • packages/cocart-utils: This package is used for interacting with the Cocart API. For more details, visit the Cocart API documentation.
  • packages/commerce-ui: This package is used for UI Design.
  • packages/eslint-config-custom: This package contains eslint configurations, including eslint-config-next and eslint-config-prettier.
  • packages/tsconfig: This package includes tsconfig.json files used throughout the monorepo.

Download and Get Started

  • Purchase the WooCommerce Headless theme and download the file from your account. If you encounter any problems while downloading, please send us an email.
  • Once downloaded, continue with the below documentation.


  • Please msake sure you have installed WordPress in a sub domain like and WooCommerce, Cocart, Yoast plugins are installed.

  • Please make sure that you have the latest version of pnpm installed on your computer. You can install the latest version of pnpm by running the following command in your terminal:

1npm install pnpm@latest -g


Installing the project is easy and straightforward. If you're using pnpm, run the following command in your terminal from the project root:

1pnpm install

That's it! The package will now be installed and ready for use in your project. You can then import the package and use its components in your code. Please make sure that you have the latest version of pnpm, npm or yarn installed in your system."


Please add all the environment variables from the example env file at apps/site

To build all apps and packages, run the following command:

#from root
pnpm run build


To develop all apps and packages, run the following command:

cd my-project
pnpm run dev


Do you offer any custom development services?

Yes, we provide consultation and technical support services for custom development projects.

How can I download the theme?

You need to purchase and download from your dashboard page in order to get the full package of our headless WooCommerce React Theme.

Is there any documentation available?

Yes, we provide detailed documentation to guide users through installation and setup process, as well as general usage information.