Awesome
<p align="center"> <img src="./logo.svg" width="200px" alt="WPGraphQL WooCommerce (WooGraphQL) Logo" /> </p>WPGraphQL WooCommerce (WooGraphQL)
<a href="https://woographql.com" target="_blank">Website</a> • <a href="https://woographql.com/docs" target="_blank">Docs</a> • <a href="https://woographql.com/schema" target="_blank">Schema</a> • <a href="https://woographql.com/playground" target="_blank">Playground</a> • <a href="https://woographql.com/about" target="_blank">About</a> • <a href="https://join.slack.com/t/wp-graphql/shared_invite/zt-3vloo60z-PpJV2PFIwEathWDOxCTTLA" target="_blank">Join Slack</a>
Install
Installing Manually
- Install and activate WPGraphQL and WooCommerce.
- Download the
wp-graphql-woocommerce.zip
file from the Assets section of the most stable release and activate the plugin in your WordPress directory. - Set your GraphQL client endpoint to your site's GraphQL endpoint. Typically, this is
your-store.domain/graphql
.
Installing with Composer
This method is recommended for users with unique installations like WP Bedrock or SpinupWP.
- Install WordPress and WooCommerce.
- Install WPGraphQL and WooGraphQL by running
composer require wp-graphql/wp-graphql wp-graphql/wp-graphql-woocommerce
. - 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
.
Optional Extras
- Install & activate WPGraphQL-JWT-Authentication to introduce a
login
mutation that returns a JSON Web Token. - Install & activate WPGraphQL Headless Login to introduce a
login
mutation with OAuth2 client support. Shouldn't be used with WPGraphQL-JWT-Authentication - Install & activate WPGraphQL-CORS for enhanced security via HTTP CORS and to utilize some advanced WPGraphQL features.
What Can You Do with This Extension?
- Query your shop's products and variations with detailed filtering options.
- Query customers, orders, coupons, and refunds. Note: Operations have user restrictions.
- Manage customer sessions using JWTs, 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.
(*) These operations have user restrictions. Learn how to utilize them correctly at the resources listed below:
- Authentication and Authorization
- Configuring a GraphQL Client for WooCommerce User Session Management
- Handling User Authentication
- Handling User Session and Using Cart Mutations
- Using Checkout Mutation and Order Mutations
- Using Order Data
(#) 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.
Alternatively, you can create a custom checkout form and process payments externally. Here is some resources for that as well.
Why Don't WooCommerce CPT GraphQL Types Support All the Features WPGraphQL Exposes for Most WordPress CPTs?
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, WooGraphQL 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 WooGraphQL support might be lacking. We apologize for any inconvenience. Both I and the entire WPGraphQL team are actively working to harmonize WooGraphQL with all WPGraphQL and WPGraphQL ACF features.
Thank you for your patience :smile: @kidunot89
Future Features
- Product CRUD mutations.
- And some other stuff I'm sure :thinking:
For WooCommerce Extensions Support
WooGraphQL Pro is an extension of WPGraphQL 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.
The following WooCommerce extensions are supported by WooGraphQL Pro:
- WooCommerce Subscriptions
- WooCommerce Product Bundles
- WooCommerce Product Add-Ons
- WooCommerce Composite Products
Installing Supported WooCommerce Extensions (Optional)
If you wish to use any of the supported WooCommerce extensions with WooGraphQL Pro, follow these steps:
- Purchase your desired extensions from the WooCommerce marketplace. The supported extensions are listed above.
- Download the
.zip
file(s) for your purchased extension(s) from your WooCommerce account. - In your WordPress Admin Dashboard, navigate to Plugins > Add New > Upload Plugin, and upload the downloaded
.zip
file(s). - Once the upload is complete, click on 'Activate Plugin' to activate the extension(s).
Installing and Activating WooGraphQL Pro
To install and activate WooGraphQL Pro, follow these steps:
- Purchase WooGraphQL Pro from our official website.
- After purchase you should find yourself on your account dashboard. Go to the
Licenses
page and generate and new license and copy it for later. - Next go to the
Downloads
page and download the latest version of WooGraphQL Pro. - Go to your WordPress Admin Dashboard, navigate to Plugins > Add New > Upload Plugin, and upload the
woographql-pro.zip
file you downloaded. - After uploading, click 'Activate Plugin' to activate WooGraphQL Pro.
Enabling Schema Support for Installed Extensions
To enable schema support for your installed extensions, follow these steps:
- Navigate to the WPGraphQL settings page on your WordPress Admin Dashboard.
- Click on the 'WooGraphQL' tab.
- Here, you'll find a list of WooGraphQL 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.
Development Tools
Playground
Feel free to test out the extension using this GraphiQL 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:
create-woonext-app
CLI and @woographql
packages
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 WooGraphQL like session management or checkout, the create-woonext-app
CLI generates a pre-created e-commerce application on Next.js application tailored to the developer/team.
npx create-woonext-app <license> [options]
The generated application utilizes the @woographql
packages exclusive to the unlimited/annual subscribers of WooGraphQL Pro. So Go Subscribe! :smile:. Below are more resources on the create-woonext-app
CLI and @woographql
packages.
create-woonext-app
Homepagecreate-woonext-app
on NPM: Thecreate-woonext-app
README with more CLI usage instructions.create-woonext-app
Live Demo: fully decked out putting all current possible functionalities of thecreate-woonext-app
on full display.@woographql/next
README: 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: React hook library acting as the backbone for UI connected to session, cart, and customer.@woographql/session-utils
README: Provides utilities for managing the WPGraphQL + WooGraphQL session tokens like aTokenManager
, also provides interfaces and types for easy customization of saidTokenManager
or the complete creation of a customTokenManager
with minimal effort. The bundled TokenManager implemented utilizes browser storage (Local/Session storage), so if you'd prefer something like Iron Session this might be the route for you.@woographql/codegen
README: A convenient wrapper for GraphQL Codegen providing a few configurations out of the box, with the ability to override the default configuration by creating acodegen.ts
in the project root.
Wanna help support WooGraphQL's future
- Sponsor @kidunot89 (WooGraphQL Creator/Developer) on Github
- Sponsor WooGraphQL on OpenCollective
- Sponsor WPGraphQL on OpenCollective
- Sponsor GraphQL-PHP on OpenCollective
- Or Contribute
Follow ![alt text](http://i.imgur.com/tXSoThF.png)
![alt text](http://i.imgur.com/P3YfQoD.png)
Demo/Examples
- Examples with Next.js
- Examples with Gatsby
Who using WooGraphQL
<img src="https://www.rockymountainsewing.com/static/759d14c25bfb3243245711ce9be6600c/logo.svg" alt="Rocky Mountain Sewing & Vacuum" width="320"/> | <img src="https://russemerket.no/src/logos/Russemerket_black.svg" alt="Russemerket" width="320"/> | <img src="https://wohnparc.de/_next_public/wopa-icons/logo.svg" alt="wohnparc.de" width="320"/> |
---|---|---|
Rocky Mountain Sewing & Vacuum | Russemerket | wohnparc.de |
Contributors
Code Contributors
This project exists thanks to all the people who contribute. [Contribute]. <a href="https://github.com/wp-graphql/wp-graphql-woocommerce/graphs/contributors"><img src="https://opencollective.com/woographql/contributors.svg?width=890&button=false" /></a>
Financial Contributors
Become a financial contributor and help us sustain our community. [Contribute]
Individuals
<a href="https://opencollective.com/woographql"><img src="https://opencollective.com/woographql/individuals.svg?width=890"></a>
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
<a href="https://opencollective.com/woographql/organization/0/website"><img src="https://opencollective.com/woographql/organization/0/avatar.svg"></a> <a href="https://opencollective.com/woographql/organization/1/website"><img src="https://opencollective.com/woographql/organization/1/avatar.svg"></a> <a href="https://opencollective.com/woographql/organization/2/website"><img src="https://opencollective.com/woographql/organization/2/avatar.svg"></a> <a href="https://opencollective.com/woographql/organization/3/website"><img src="https://opencollective.com/woographql/organization/3/avatar.svg"></a> <a href="https://opencollective.com/woographql/organization/4/website"><img src="https://opencollective.com/woographql/organization/4/avatar.svg"></a> <a href="https://opencollective.com/woographql/organization/5/website"><img src="https://opencollective.com/woographql/organization/5/avatar.svg"></a> <a href="https://opencollective.com/woographql/organization/6/website"><img src="https://opencollective.com/woographql/organization/6/avatar.svg"></a> <a href="https://opencollective.com/woographql/organization/7/website"><img src="https://opencollective.com/woographql/organization/7/avatar.svg"></a> <a href="https://opencollective.com/woographql/organization/8/website"><img src="https://opencollective.com/woographql/organization/8/avatar.svg"></a> <a href="https://opencollective.com/woographql/organization/9/website"><img src="https://opencollective.com/woographql/organization/9/avatar.svg"></a>