Yesterday I received a call from Michael Littman, asking if I could set up online ordering on the WordPress website we had built for Hapa Ramen & Whiskey. Their phone and take-out ordering, to continue serving food during this early stage of the COVID-19 crisis, has been going pretty well so far. However, allowing folks to order online would be both quicker and safer, in that there would be one less point of physical contact during the payment process.
We discussed the different options, including pre-existing online services such as TryCaviar.com or PostMates.com. One issue that led us toward using Hapa’s WordPress site instead of those services was knowing that Hapa uses SquareUp.com for their payment processing, and wanted to see if we could keep the transactions going directly to their Square account instead of running through another service.
I was already aware that the most popular WordPress shopping cart, WooCommerce, has a free plugin to accept Square payments. I wasn’t sure what WooCommerce tools might be available for online food ordering, though, so I started the search.
It turns out that there are multiple plugins that offer online ordering, and the most promising for quick integration and setup seemed to me to be “Food Online for WooCommerce“—it is a free plugin with extended options available in its paid version.
The Food Online for WooCommerce menu display, as used on HapaPDX.us — which required only minimal setup!
With the three necessary legs of this process in place (online store, online payments, online food ordering) I got to work. I added the WooCommerce plugin and did the store setup process to get all the primary details in place. Setting up the WooCommerce Square payments plugin was quick and painless as well—easy enough that it worried me whether I had done it correctly all the way up until we tested the first transaction! The Food Online plugin was likewise pretty quick and easy to set up, including quickly putting in the restaurant’s entire menu—which I mostly did using the WordPress site’s admin from the nicely sized screen of my Samsung Galaxy Note cellphone!
The main snags I ran into were styling related, rather than involving the technical elements of the store, payments, or online food ordering plugins. For example, the item popup for Food Online popped up behind the site’s header and navigation menu. What seemed like it should be a very quick fix there turned out to be a little bit of a challenge, getting the moving parts to cooperate, but I managed after a reasonably short amount of time.
Finally, just a couple of hours after I’d started researching, the entire setup was ready and I ordered myself some Mochi ice cream to test that the ordering worked and that it successfully submitted a payment. Success! Michael reported that the notifications I’d set up—to send both an email and to send a text message alerting him of the order—worked exactly as planned.
As an afterthought, Michael asked if we can limit the times that online orders can be made, so I found “Order Hours Scheduler for WooCommerce” and quickly set that up and tested it.
We will be rolling out the online ordering on Hapa’s site starting today. While I’m sure we will make improvements—and I’m also sure there are bound to be bumps along the way—I’m delighted at how quick it was to set up this process to fulfill the most basic requirements of online food ordering for restaurants with WordPress websites.
Follow Us!