We wanted to explore a possible setup and tools needed to convert a WordPress website into a store front for a restaurant (including deli, pizza place, etc.) using WooCommerce. There can be challenges when it comes to taking food orders online. You might want to allow customers to add extra toppings and/or print orders directly to the store as the orders are placed. There are 3rd party tools and websites that take of this for you but some have hefty charges per transaction.

We won’t go into details about how to format the CSS of your pages. There is plenty of documentation online and changes vary based on your site’s theme. Overall we hope to provide enough information to help you set up a store. We broke down the process into 3 major articles:

  1. Restaurant Basic Setup: Install WooCommerce and setup your basic products. This will be the bare minimum to start taking orders on your website
  2. Enabling Customizable Orders: Enable customizations for your dishes so customers can pick and choose toppings before checking out
  3. Order Processing and ticket printing

 

Restaurant Basic Setup

A restaurant website will need a list of products, a customer facing food menu, a way for customers to customize their orders, and ultimately a way to process orders. For the basic setup we will go over the products and food menu. The work will be handled by WooCommerce (WC) which is a plugin intended for E-commerce. WC might be overkill for a restaurant but they have so much documentation, good support, and it is free, that it was a no brainer. And if you later decide to sell souvenirs or other miscellaneous items, then you will be ahead of the curve.

To start, you need to Setup WooCommerce (WC). Download and install WC on your WordPress site by going to wp-admin à Plugins à [add new] and search for WooCommerce

Install and Activate WC.

woocommerce-activation

As part of the activation process, WC will be prompt you to add a few basic pages like cart to your site. Make sure you let WC do this step because you will need these pages. You will be prompted to setup taxes and finally for payments. The latter can be setup for cash on delivery and/or your payment processing system.

woocommerce-flow

Once WC is installed, there are a few settings changes you need to make or confirm:

  1. Show products in your WC catalog page instead of categories. Go to -> WooCommerce -> Settings -> Products Tab -> Display section, and set “Shop Page display”
  1. If you missed the tax step, and you need to charge taxes, the setup is under àWooCommerce à Settings -> Tax Tab -> Standard Rate section, add the appropriate taxes. These rates vary depending on your store location and the laws in your area. Make sure you “save Changes” when you are done

 

Products and Categories

WooCommerce is now installed and before we start adding products for your store we recommend you break down your menu items into a few categories to keep the data organized. For example: Pizzas, Burgers, Sandwiches, etc. For “Slug” we picked a basic naming convention. We will need to add a category called “extras” with a slug “category-extras”. To create your categories, go to Products -> Categories

woocommerce-categories-small

Next add a list of “simple” products by going to Products -> Add Product. All your food menu items should be set up with proper SKU, pictures, assigned category, price, and short description.

woocommerce-products-small2

SKU setup is on the “Inventory” tab and it should be unique for each product. If you are syncing up your online restaurant front with Square you will have the use the SKUs as Square in order for the system to properly sync up.

woocommerce-products-sku

Once the product setup is completed, Publish/Update and repeat until you add all your food menu items.

There are many other settings and tweaks you can do with WooCommerce based on your e-commerce needs but we are keeping the setup simple for this exercise. If you want to dive into the additional product setup see link https://docs.woocommerce.com/document/managing-products/

Extras and Add-Ons

We want to allow customers to customize their order by adding extras such as bacon or no mayo. We will enable this functionality in the next post but we will need to add food extras as if you were adding any other products. Much like before, add your extras as if you were adding any other product with a price and sku but mark the “catalog visibility” as hidden under the Publish right nav of the product edit page. By marking Extras as hidden the customer will not see it in your food menu as a standalone item.  Also assign the “extra” category to the product.

Your default catalog page  yoursiteurl.com/shop/ should now be populated with your food menu items. Remember that all products that are not marked as “hidden” will be displayed here. By default customers will see:

catalog-default

Like we said, you can change the Style to anything you want. We ended with:

digital-alphas-woocommerce-restaurant-header

At this point you have completed your WooCommerce restaurant setup. In our next post we will be Enabling Customizable Restaurant Orders with WC Fields Factory