Headless WooCommerce & Next.js: Set up WooCommerce & Test with Postman

Leo Chan
Geek Culture
Published in
5 min readJul 29, 2021
Photo by Roman Kraft on Unsplash

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.

Screenshot showing the Add Product screen in WooCommerce

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.

Photo by Mick Haupt on Unsplash

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.

Screenshot of Postman

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.

Screenshot of a successful JSON response from WooCommerce API end point

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.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Leo Chan
Leo Chan

Written by Leo Chan

Lockdown coder: transformation from non-coder to coder in under 12 months…complete-ish.

Responses (1)

Write a response

Recommended from Medium

Lists

See more recommendations