Headless WooCommerce & Next.js: Set up WooCommerce & Test with Postman
Now that you have your WordPress site with WooCommerce installed it’s time to configure WooCommerce and start adding some products to sell!
Configure WooCommerce Settings
In your WordPress site, click the WooCommerce menu option and go to Settings
. In the settings page there will be further options to explore under different tabs (e.g. General, Products, Shipping, Payments).
Take your time and familiarise yourself with the settings but I’m giving this a light touch in this article as the main thing I want to cover with you is how to get products into your website and be able to checkout and pay for things.
At the very least let’s ensure the currency is set correctly— I’m using Pound sterling(£)
. Remember to click Save changes
at the bottom of the screen.
We will deal with Payments at a later stage when we can use Stripe to help us process card payments.
In the Advanced
tab click on the REST API
link and add a key. Use any description you like and make sure the permissions are set to Read/Write
. This will generate a consumer key and consumer secret which you will need to access WooCommerce API endpoints.
Add Products
Click the Products menu option on the navbar and go to Add New
. Again, there are lots of options to choose from here and we are going to keep it simple. In this instance, we want a product name, a description, an image and the price. This example will only use Simple products
but you can experiment when you’re comfortable with things.

When adding an image, you can upload a file (and add alt text
) so the image will be saved in your Wordpress site and you can access it via URL if you want to. Click Publish
when you are ready or Save draft
if you wish to work on it later.
Add a few products to begin with and then we’ll use Postman to test if we can get the data.
Note: Make sure you are using pretty permalinks in Settings > Permalinks
so that the custom endpoints are supported. Default permalinks will not work.
Postman
Postman is a handy tool that lets you make requests to API endpoints without needing to get into the code. Using this tool we can get a preview of the data we are fetching.
It’s about time we had a look at the WooCommerce developer docs and their REST API docs in particular. For starters, it tells us 1) what the requirements are, 2) that is has an official JavaScript library, and 3) what we need to do to authenticate the API call.
Importantly, there are different authentication methods depending on whether you are using HTTP (OAuth 1.0a) or HTTPS (Basic Auth). As I am using a local development website I will need to authenticate using OAuth 1.0a. The WooCommerce developer docs gives you plenty of information about it but it can get overwhelming pretty quickly. Let’s look at how we can get this to work using Postman to begin with.

Create a new tab in Postman and click on the Authorization
option. Here we can choose from different authentication types. We want OAuth 1.0
. In the panel to the right we need to enter our credentials. WooCommerce has specified that the signature method it requires is HMAC-SHA1 so let’s choose this. The next two fields relate to Consumer Key
and Consumer Secret
. You had generated these earlier in the WooCommerce settings tab (under Advanced) so copy and paste the values here. There is no need to include Access Token
or Token Secret
.
With the authentication credentials in place we need to enter the API endpoint we want to hit/consume.
We want to list all the products we added to WooCommerce recently. In the WooCommerce developer docs there is a section for Products -> List all products. The docs tell us the HTTP request is: GET /wp-json/wc/v3/products
. We know it’s a GET request and the endpoint gets appended to your base URL — in our case, the base URL is http://localhost/woocommercenextjs
.
In Postman, make sure the request is GET and type in the URL with the base URL followed by the API endpoint.
GET
http://localhost/woocommercenextjs/wp-json/wc/v3/products
The authentication credentials are already set so you can click Send
and see a successful response.

You can see the response we get back is the same structure as the example in the WooCommerce developer docs. Therefore, if you don’t wish to use Postman to test then you have the example in the docs as a reference for the JSON response you can expect to receive.
Now we know we are able to fetch data from WooCommerce we can turn our attentions to the front-end and Next.js.