How to run Wordpress + Woocommerce Locally with Docker
Tags: docker, wordpress
Published: 2021-07-30 23:01:50

Photo by <a href="https://unsplash.com/@tozakfikret?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Fikret tozak</a> on <a href="https://unsplash.com/s/photos/wordpress-woocommerce?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

For the last two days, I have been stuck in how to run a locally Wordpress Store with Woocommerce.

I have tried to use the (g)old LAMP with NGINX, docker images, whatever until find the easiest way. 

An online friend on WordPress slack named Leandro shares a link from official docs on Docker where they explain how to run a WordPress store with two simple images.

This tutorial will be upon this link. There is explained how to create a new docker-compose file to compose an image from MySQL and WordPress to have locally your store.

The link is here [Quickstart: Compose and WordPress](https://docs.docker.com/samples/wordpress/) and before continuing check it and create the docker-compose file in a local folder in your machine.

## Editing the files locally
Let's edit our `docker-compose.yml` file to bring the content from containers to our local machine.

From this, we can edit the files locally and reproduce whatever we want on the local store.

For example, we can use this to create a new payment plugin.

- Open the `docker-compose.yml` and replace for this code:

```yml
version: "3.9"
services:
  db:
    image: mysql:5.7
    volumes:
      - ./db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    volumes:
      - ./wordpress:/var/www/html
      - ./plugins:/var/www/html/wp-content/plugins
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
```

Here we use volumes to make available locally the folders we want to have access to.

Look to the lines 17, 18, and 19. It is where we ask to transform the content of folders into volumes. Thanks for Fernando Almeida, a friend from React Brasil slack helped me with this.

Now, on the root folder as the same as the docker-compose file, run `docker-compose up -d` to mount our containers and images.

![compose](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgzpf9pd683521mt0jh4.png) 

Now, the folders `db_data`, `plugins` and `WordPress` must be available locally and you can start your development work o/!!

![folders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2l1y7rtigxdut9urz49o.png)

**The wordpress site**
![site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bqypqkwhcxahwwp2std.png) 
 

## Woocommerce Store
Until here we just have a simple WordPress blog. My use case needs to have a woocommerce store.

To get it we need to complete the simple steps explained below

### Step 1 - Install a storefront theme
Let's install a theme to transform our website in a store. The default theme of WordPress is a blog site and is not what we want.

`Dashboard > Appearance > Themes > Add new and search for "storefront".`

### Step 2 - Install the woocommerce plugin
Install the woo-commerce plugin similar to the last step:

`Dashboard > Plugins > Add new and search for "woocommerce"`

Now, your store is completely configured to be used locally
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lifj9g45s95zaf2unlj.png)

**The repo is available here** [docker-wordpress](https://github.com/daniloab/docker-wordpress)