Add a new VVV development site just for WooCommerce

Join me as I demonstrate how you can have a totally separate WordPress environment complete with WooCommerce within your VVV install.

I’ve spent the last couple of weeks carrying out a number of updates to Kapow!, our in-house WordPress development boilerplate that we use at Make Do as a starting point for all new client sites, and as a result of this I’ve had to upgrade my local set-up to use the super-shiny brand new Varying Vagrant Vagrants (VVV) 2.0.

VVV makes the process of provisioning new local development sites a breeze, and I decided to take the opportunity to create a new local environment for WooCommerce plugin/theme development, testing and general tinkering.

Granted, I already have the wordpress-default site available, but I’m keen to keep that for building and testing vanilla themes and plugins: so the goal is to have two separate environments.

Forking the default provision script

VVV 2.0 pulls down a couple of GitHub repositories containing the provisioning scripts necessary to install the default wordpress-default and wordpress-develop sites when you run a complete provision: such as when you install or upgrade VVV.

The beauty of this is that the default site repositories can easily be forked and modified for our own use. I’ve forked the repository that is responsible for setting up the wordpress-default site and have modified it to change the local domain to local.woocommerce.dev, change the database to wordpress_woocommere and install the WooCommerce plugin using WP CLI, amongst other small tweaks. You can find the fork here: VVV WordPress WooCommerce

Adding the new site configuration

In your vvv-custom.yml file you should add the new WooCommerce site directly below your wordpress-default site configuration. Here’s how my file looks:

As you can see from the above Gist, in the new site configuration that I’ve called wordpress-default-woo I’m pointing to my fork of the default site repository, rather than the VVV version. You can call this site configuration anything you like, as long as it remains in the same format e.g. your-site-slug.

Provisioning the new site

One of the things I love the most about VVV 2.0 is the ability to provision a single site at a time, rather than having to endure the full provisioning process.

First of all ensure that you’re in your root VVV folder (mine is ~/Vagrant for example) and then execute the following command to provision the new WooCommerce development site, replacing wordpress-default-woo with the site slug that you’ve chosen:

vagrant provision --provision-with=site-wordpress-default-woo

A couple of minutes later you should see something like this:

Huzzah! As you can see from the output of the provisioning script, you will not only have a default copy of WordPress installed and configured, but you will have the latest stable release of WooCommerce installed and activated.

Now, if you visit local.woocommerce.dev in your browser and you were fortunate enough to experience no issues during the provisioning process you should be treated to this.

Now you have a totally separate WordPress environment complete with WooCommerce!

UPDATE: I’ve now tweaked the provisioning script to automatically install and activate the Storefront theme as well, providing a more appropriate base theme to work with.

Reply