Headless WooCommerce & Next.js: Create a local WordPress with WooCommerce

Published in

Geek Culture

6 min readJul 28, 2021

This is the first in a series of articles taking you through how I use WooCommerce’s REST API and create a headless website using Next.js that can display products, add to cart and checkout with card payments via Stripe.

I have created a standard Wordpress site with WooCommerce before and it works well with templates but I found it limiting and slow. I like the idea of creating a headless solution with WooCommerce handling the back-end and Next.js bridging the gap and providing a custom front-end that is lightning fast.

The theory is if I decide to move away from WooCommerce and use a different e-commerce platform I won’t need to completely overhaul the UI. Instead, at a basic level, I can refactor the app to use the new API and pass data into the UI components so it looks the same but fetches its data from a different source. Equally, if we wanted to use a different framework other than Next.js — perhaps we want to create a native mobile app — then we can create the new UI and use the same API and data across different platforms.

Before you set up WordPress

Starting out as a developer, I am looking for free things to be honest. I wanted to experiment with WooCommerce but I didn’t want to pay the hosting fees to have a WordPress site.

I mentioned this in another article of mine but Wordpress.org and Wordpress.com really confused me at the beginning. Wordpress is open source software and free to use. For most people the first instinct would be to take a look at Wordpress.com given that .com is the most common top-level domain. However, Wordpress.com is the commercial arm of Wordpress and is therefore trying to make money from you. If you go for one of their free accounts you can get a Wordpress website spun up pretty quickly but you must pay to use plugins - even if the plugin is usually free to use!

Instead, head over to Wordpress.org where you can download Wordpress for free and use free plugins for…free! Yes, there will be plugins that you have to pay for but at least you have the choice.

Before you continue any further you need to decide where you are going to host your website. Many web hosts include one-click Wordpress installers and make it easy to set up a Wordpress website with them but you will need to pay the web host provider for the hosting in the first instance. The advantage here is you will have a live website that you can browse to.

The free option is to create a local development website on your computer — you won’t be able to access the website outside of your network but it is handy for testing and development purposes.

There is a drawback to bring to your attention that applies when using Stripe. Later on you might want to use Stripe webhooks to carry out a function when a card payment has been successfully processed (e.g. to update a WooCommerce order status). Stripe only allows webhooks to be sent to secure https:// URLs and your local development website will fall short of this requirement.

Set up a local Wordpress site

You will need to set up a server and a database in order to get Wordpress up-and-running. There are different options available but I have only used one combination and I’ll show you how I did it.

Setup server and database

We know we need a server and a database and XAMPP helps us achieve both of these things. It is free to use and you can download and install it at apachefriends.org. Click through the installer prompts until you get to select components to install. The only components you need to tick are:

Server:
[/] Apache
[/] MySQLProgram Languages:
[/] PHP
[/] phpMyAdmin

Apache is the server, MySQL is the database, PHP is the language the software uses (you don’t need to know PHP necessarily) and phpMyAdmin allows you to interact and manage your database.

The installer may ask you to install Bitnami but you can ignore this.

After the installation, you will need to run XAMPP (remember to run XAMPP after you restart or shut down your computer too) and click start on the Apache server and start on the MySQL database. With the server and database started you can test it works by opening your browser and navigating to http://localhost/ . You should see a welcome screen from XAMPP.

Setup Wordpress files

With the server and database in place we can now turn our attentions to Wordpress itself. Download the latest version of Wordpress at wordpress.org.

In Windows, navigate to the folder where you installed XAMPP (it’s usually C:\xampp ) and locate the \htdocs folder. It is in the \htdocs folder where you will save all local Wordpress sites. Go ahead and create a new subfolder in \htdocs and call it something relevant — I named mine \htdocs\woocommercenextjs . Now you will want to extract the contents of the recently downloaded Wordpress zip file into the \woocommercenextjs subfolder. Note: extract all usually keeps all the contents in its own wordpress folder. You don’t want this folder — you only need the contents directly in your \woocommercenextjs folder.

Configure database

The next step is to create a database and point it to your new project.

Open up the XAMPP control panel and click the Admin button for MySQL. This will open up phpMyAdmin which helps you manage your database. There are a lot of options here but all we want to do is create a new database. To do this, click the Databases tab and in the input fields under ‘Create database’ add the name you used for your recently created Windows subfolder — in this example it is woocommercenextjs—choose Collation in the drop down box (at the very top of the list) and then click Create . Note: you don’t have to use the same name as your Windows subfolder but it makes sense to do it and create some consistency.

Install Wordpress

We’re almost there. With the database created for our new project we can now install Wordpress.

To do this, we open up our browser and navigate to http://localhost/woocommercenextjs where the woocommercenextjs is the exact name you chose for your subfolder in \htdocs . This will be the local URL address you can use to access your Wordpress site from now on as long as your server and database are running via XAMPP.

You will be presented with the Wordpress installer and you can click through until you need to enter your database details. Use the details below and only change the database name to whatever you used in phpMyAdmin. Note: the password field is deliberately left blank.

Database Name: woocommercenextjs
Username: root
Password:
Database Host: localhost
Table Prefix: wp_

Run through the rest of the installation and that’s it! Now you can navigate to http://localhost/woocommercenextjs to see your local Wordpress site. If you need to access the Wordpress admin then you can navigate to http://localhost/woocommercenextjs/wp-admin .