Sourcing from WooCommerce
WooCommerce is the e-commerce platform for WordPress. This guide will serve as a helpful reference whether you’re interested in getting started with e-commerce for your WordPress site or beginning to use Gatsby with your current WooCommerce setup.
This guide assumes some familiarity with WordPress. You may want to read about Sourcing from WordPress or step through a tutorial on how to build a blog with WordPress and Gatsby before diving in.
You’ll need a WordPress site with the WooCommerce plugin installed and activated.
This guide assumes the use of the
Configure its options:
consumer_secret come from WooCommerce. From your dashboard, go to WooCommerce > Settings > Advanced > REST API and then add a key. You can then copy and paste both the key and secret. Make sure to store any sensitive information in environment variables!
It’s worth noting that the official WordPress source plugin is in active development. Knowing that this work is in-progress, if you’re interested in working with a GraphQL endpoint directly in your WordPress installation, see the section below on pending changes to get started with WPGraphQL and WooCommerce.
WooCommerce products are the core of your WooCommerce site, so you’ll want to add some to your store. When you’re first getting started, there’s no need to dump absolutely everything you want to sell into your store. Begin with a few products that you can use to verify that everything is hooked up correctly. You can also import products from a CSV file.
You should see a prompt to create your first product after completing the WooCommerce setup wizard. Doing so at this time will trigger a guided tour of the new product form. Walk through this process for each product you’d like to add to your store.
Once this is done, you’ll be able to use GraphQL to query for your products by adding this query to the appropriate component:
You can explore the data available to your site using GraphiQL. This is dependent on the fields you have specified in
gatsby-config.js. The plugin documentation has tons of suggested GraphQL queries. If you don’t see the options listed there, try adjusting the
fields array and/or refreshing your GraphiQL tab.
You can explore possible queries in the WPGraphQL WooCommerce Playground. Note that some queries are only available to shop managers as opposed to customers.
gatsby-source-wordpress is undergoing a major rewrite at the time of writing. This new major version of the official source plugin is likely to change the optimal solution for using WooCommerce with Gatsby. For now, new projects should start with
gatsby-source-graphql rather than
gatsby-source-wordpress to ease the transition. If you’re interested in the current progress of the plugin, you can check out the working alpha version. Once this work is done, the
wp-graphql-woocommerce plugin will be the recommended option.
The WPGraphQL plugin is also undergoing significant changes. It has not yet hit v1 and may therefore introduce breaking changes as it continues to progress through development. It can be used in production but keep this in mind when using the plugin!