[](https://github.com/wp-graphql/wp-graphql-woocommerce/actions/workflows/continous-integration.yml) [](https://github.com/wp-graphql/wp-graphql-woocommerce/actions/workflows/lint-code.yml) [](https://coveralls.io/github/wp-graphql/wp-graphql-woocommerce?branch=develop) [](https://opencollective.com/woographql)
1. Install and activate [WPGraphQL](https://wpgraphql.com/) and [WooCommerce](https://woocommerce.com/).
2. Download the `wp-graphql-woocommerce.zip` file from the Assets section of the most stable [release](https://github.com/wp-graphql/wp-graphql-woocommerce/releases) and activate the plugin in your WordPress directory.
3. Set your GraphQL client endpoint to your site's GraphQL endpoint. Typically, this is `your-store.domain/graphql`.
3. Set your GraphQL client endpoint to your site's GraphQL endpoint. For typical Bedrock or SpinupWP setups, the default will be `your-store.domain/wp/graphql`.
- Install & activate [WPGraphQL-JWT-Authentication](https://github.com/wp-graphql/wp-graphql-jwt-authentication) to introduce a `login` mutation that returns a JSON Web Token.
- Install & activate [WPGraphQL Headless Login](https://github.com/AxeWP/wp-graphql-headless-login) to introduce a `login` mutation with OAuth2 client support. **Shouldn't be used with WPGraphQL-JWT-Authentication**
- Install & activate [WPGraphQL-CORS](https://github.com/funkhaus/wp-graphql-cors) for enhanced security via HTTP CORS and to utilize some advanced WPGraphQL features.
- Manage customer sessions using JWTs or WooCommerce Store API Cart-Tokens, and use cart/customer queries and mutations. Note: Operations have user restrictions.
- Manually create orders, automate order creation with the checkout mutation, or delegate a customer's session to the WooCommerce checkout page in your theme for comprehensive payment gateway support.
(#) The recommended method to checkout, taking full advantage of WooCommerce's payment gateways for payment process and other checkout-related extenstions, is to pass the session back to the WordPress installation and let WooCommerce take over from the tradition checkout page. Learn more about this approach below.
- [Headless WooCommerce Checkout with Gatsby and Stripe](https://jacobarriola.com/post/headless-woocommerce-stripe-checkout-graphql#step-5-load-the-checkoutform-component-in-your-checkout-page)
WooCommerce's Custom Post Types (CPTs) and most data objects are managed by a data store system. This system allows for flexible data object definitions. While objects like **products**, **orders**, and **coupons** are defined as WordPress CPTs by default, they don't have to be.
This flexibility also lets WooCommerce store metadata for these CPTs in separate tables, and the data doesn't necessarily have to reside in the same database.
The data store system and its object managers are WooGraphQL's primary contact points. Unlike standard CPTs, which use a **WP_Post** object for data sourcing and a **WPGraphQL\Model\Post** object for modeling, WPGraphQL for WooCommerce engages object managers for its data source. Each object type has a unique model with distinct permissions and restrictions.
Such a setup has resulted in some disparities between the schema where WPGraphQL for WooCommerce support might be lacking. We apologize for any inconvenience. Both I and the entire **WPGraphQL** team are actively working to harmonize WPGraphQL for WooCommerce with all **WPGraphQL** and **WPGraphQL ACF** features.
**[WooGraphQL Pro](https://woographql.com/pro)** is an extension of WPGraphQL for WooCommerce that provides compatibility with a variety of popular WooCommerce extensions. This compatibility empowers you to leverage these extensions within the context of the GraphQL API, thereby enabling you to build more dynamic and powerful headless eCommerce applications.
3. Here, you'll find a list of WPGraphQL for WooCommerce configuration options. Go below to the **WooGraphQL Pro** section and paste in license and check the boxes next to your installed extensions to enable schema support for them.
Note: The 'Enable Unsupported Product Type' option can be found on the same settings tab. If you enable this option, any product type without a proper GraphQL type will default to the `UnsupportedProduct` type, which is identical to the `SimpleProduct` type. With this type, the client can use the `metaData` field to get a `string` representation of the meta data on the type. This could potentially be all that's needed for simpler product types.
With WooGraphQL Pro and your chosen extensions now installed, you're ready to build more sophisticated, feature-rich eCommerce solutions with WordPress and WooCommerce.
Feel free to test out the extension using this [GraphiQL Playground](https://woographql.com/playground). The playground allows you to execute queries and mutations, as well as view the schema (*).
(*) I have a tendency to forget to update the playground between releases :sweat_smile:, so if you believe this to be the case look me up somewhere on this page and lemme know :man_shrugging:
Designed to both streamline development for individuals and teams looking to utilize WooCommerce + WooCommerce extensions in larger project and not waste too much to much time on the particulars of WPGraphQL for WooCommerce like session management or checkout, the **[`create-woonext-app`](https://www.npmjs.com/package/create-woonext-app)** CLI generates a pre-created e-commerce application on [Next.js](https://nextjs.org) application tailored to the developer/team.
The generated application utilizes the **[`@woographql`](https://yeetsquad.net)** packages exclusive to the unlimited/annual subscribers of WooGraphQL Pro. So Go [Subscribe!](https://woographql.com/pro#pricing) :smile:. Below are more resources on the `create-woonext-app` CLI and `@woographql` packages.
- [`create-woonext-app` on NPM](https://www.npmjs.com/package/create-woonext-app): The `create-woonext-app` README with more CLI usage instructions.
- [`create-woonext-app` Live Demo](https://woonext.woographql.com/): fully decked out putting all current possible functionalities of the `create-woonext-app` on full display.
- [`@woographql/next` README](https://yeetsquad.net/-/web/detail/@woographql/next): A Template generator CLI. Capable of generator a multitude of Next.js pages, Next.js Route Handlers, react components, react hooks, and utilities. It's also equipped to generate react component and hook stubs for speedy component create with no boilerplate.
- [`@woographql/react-hooks` README](https://yeetsquad.net/-/web/detail/@woographql/react-hooks): React hook library acting as the backbone for UI connected to session, cart, and customer.
- [`@woographql/session-utils` README](https://yeetsquad.net/-/web/detail/@woographql/session-utils): Provides utilities for managing the WPGraphQL + WPGraphQL for WooCommerce session tokens like a `TokenManager`, also provides interfaces and types for easy customization of said `TokenManager` or the complete creation of a custom `TokenManager` with minimal effort. The bundled TokenManager implemented utilizes browser storage _(Local/Session storage)_, so if you'd prefer something like [Iron Session](https://github.com/vvo/iron-session) this might be the route for you.
- [`@woographql/codegen` README](https://yeetsquad.net/-/web/detail/@woographql/codegen): A convenient wrapper for GraphQL Codegen providing a few configurations out of the box, with the ability to override the default configuration by creating a `codegen.ts` in the project root.
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/woographql/contribute)]
**Disclaimer:***WPGraphQL for WooCommerce* is an open-source WordPress plugin and WooCommerce extension developed and maintained by [Geoff Taylor](https://woographql.com/about), licensed under GPLv3. It is not owned, maintained, or affiliated with [Automattic](https://automattic.com) or [WooCommerce](https://woocommerce.com).
