WooCommerce POS: Taking Food Orders at the Counter or Table using an iPad/Tablet
If you’re looking for a simple solution for taking food orders at the counter or table using an iPad/tablet, look no further! This tutorial will teach you how to create a WooCommerce POS food ordering system for your restaurant’s waiting or behind-the-counter staff – with no technical expertise.
If you run any kind of restaurant or café, having software that facilitates taking food orders is a must-have. The idea is simple: instead of writing down the customer’s order on paper, the waiting staff simply input it into the food ordering system. This facilitates taking food orders at the counter or table using an iPad/tablet.
A WooCommerce POD food ordering system simplifies the order taking process. It makes it easy for the waiting staff and behind-the-counter staff to add and remove items from the order and select variations. The food order is then instantly sent to the kitchen.
I’ll show you how to use WooCommerce and the WooCommerce Product Table plugin to create a one-page restaurant ordering system that allows staff to take food orders from customers. They can use the system on an iPad or tablet, which is much more convenient and customer-focussed than traditional methods.
First, I’ll show you how to install and setup the WooCommerce Product Table plugin on your WordPress website.
Next, you’ll learn how to use this plugin to create a user-friendly, one-page ordering form. Your restaurant’s waiting staff can use this form to browse, select, and customize the customer’s order.
And, finally, we’ll share some tips on how you can improve the order taking process through advanced features like sending orders directly to the kitchen.
Why your restaurant’s waiting staff needs a WooCommerce POS tool to take food orders
Traditionally, a restaurant’s waiting or bar staff takes customer orders on a notepad and inputs it into a static computer screen. This creates a record and forwards the information to the kitchen. Unfortunately, this method for taking orders causes a number of problems:
- Most restaurants run outdated software on their computers that’s difficult to use, instead of something modern and user-friendly (like WordPress and WooCommerce).
- Waiting staff usually take the customer’s order on paper (or memorizes it) then inputs it into the computer. This often leads inaccurate food orders being placed. I’m sure everyone has experienced being served the wrong dish, or an important request being overlooked!
- Since there’s usually only one computer, waiting staff often have to queue to input the customer’s food order. This cases delays in sending food orders to the kitchen. In addition, it prevents waiting staff from using their time efficiently. Same same applies to over-the-counter food orders, for example at a deli or takeaway restaurant.
- Desktop computers take up valuable space at the counter or behind the bar.
The solution is to set up a WooCommerce POS food ordering system to take food orders directly at the table, bar or counter using an iPad/tablet.
How your restaurant can benefit from an automated POS food ordering system
A WordPress website with a WooCommerce POS ordering system will allow your waiting staff to take customer orders quickly. It’s easy to set up, and uses the market leading WooCommerce plugin with a few tweaks and extra plugins.
An automated food ordering system not only makes it easy for the waiting staff to take customer orders but it also creates operational efficiencies in your restaurant. Essentially, it works like a portable point of sale (POS) system. Instead of jotting down the customer’s order, the waiting staff simply has to select the right food boxes. This improves food order accuracy and makes it easy for them to read the customer’s order back to them.
And after the customer’s order has been placed, it’s automatically sent to the kitchen staff. This way, the waiting staff can move on to the next table or the next customer in line, instead of having to go to the kitchen first.
What you’ll need to get started
WooCommerce is the world’s leading e-commerce platform. Ideal for selling absolutely anything, you can use it to organize food items on your menu as products, display a shopping cart, place orders, and checkout. It’s a free plugin that you can install on any WordPress website. For those of you who don’t already have a WP website, there are tons of online resources you can use to get started with WordPress.
Introducing the WooCommerce Product Table plugin
Although the free WooCommerce plugin comes with a built-in layout, it’s not really suitable for POS food ordering. The WooCommerce Product Table plugin displays your food items in a simple, one-page table layout that doubles as a quick food order form.
It allows waiting staff to take customer orders. They can search, sort, and filter the food items in your restaurant’s order form to quickly find each food and place orders. They can:
- Choose food item variations or add-on options directly from the food order form.
- Use the quantity selector to order a particular food order for many people.
- Add extra notes about the order, such as special dietary requirements (requires an additional WordPress plugin.)
- Make a note of the customer’s table or queue number, which is sent to the kitchen for fulfilment.
How it works
Completed orders are automatically sent via email and can appear on a computer screen. Alternatively, you can install a WooCommerce order printing plugin to automatically print orders in the kitchen.
If the customer is dining at the restaurant, they can pay at the end of their meal in the usual way. At the counter, customers can pay for their order using your existing payment methods. This is done separately from the food ordering system, which is used to take orders and send them to the kitchen. (If you’d rather take credit card payments directly in the WooCommerce POS system, that’s fine too.)
The best part is that if you already have a WordPress website for your restaurant or food business, you can simply create a hidden area on it instead of investing in a separate system.
How to create a food ordering system for your restaurant’s waiting staff
Once you’ve got a WordPress website with a WooCommerce-ready theme installed, you can step through this tutorial to begin creating a food ordering system. The food ordering system is designed to help the waiting staff take customer food orders from behind the counter (or bar) or at the table. Either follow it from start to finish or jump straight to a specific step:
- Add each food as a WooCommerce product
- Install and activate the WooCommerce Product Table plugin
- Configure the Product Table settings
- Create a one-page WooCommerce POS food order form for waiting staff
- Simplify the checkout process for staff
- Automatically mark orders as complete
- Send orders to the kitchen
- (Optional) Protect your food order system and hide it from public view
Step 1: Add each food as a WooCommerce product
Once you’ve installed the WooCommerce plugin on your WordPress website, add your restaurant’s menu items as WooCommerce products:
Navigate to Products > Add New from the WP dashboard and enter the following product details:
- Product name. This is the name of the menu item that will appear in your WooCommerce POS food ordering system.
- Product description. Enter the full description of the menu item in the main text editor.
- Product data. Enter the menu item’s price, type, SKU, attributes, and variations here.
- Product short description. You can create a short description for the menu item if you’d like.
- Product categories. Organizing menu items into categories helps keep everything organized. You can create categories like Main Course, Starters, or Beverages.
- Product tags. Similar to categories, tags help you further organize your food items and make it easier for waiters and waitresses to find particular food items. For instance, you could use tags like Vegetarian, Healthy, or Non-Vegetarian.
- Product image. This is the food item’s image that you can choose to display in your food ordering form.
In the ‘Product Data’ section, use the ‘Simple Product’ type for foods where there are no options or choices. Use ‘Variable Products’ for adding choices. For example, if you are creating a ‘Rump Steak’ product then you could add a variation for ‘Rare’, ‘Medium Rare’, ‘Well Done’, etc.
Once you’re done, click the Publish button. Repeat this process until you’ve added all of your menu items as products to WooCommerce.
For more information on how to use tags, attributes, and variations for menu items, be sure to check out our WooCommerce restaurant ordering system guide. Later, we’ll also show you how you can integrate a product add-ons option into your Woo food ordering form.
Bonus tip: Add text boxes and other extra fields to your food items
You can use the Product Add-Ons plugin to add a text box for each product that allows the waiting staff to add notes next to each food item. Let’s say a customer requests extra cheese on their pizza or informs the staff that they have a nut allergy. The waiting staff can add their request (or information) as a note against the food item.
Product Add-Ons is also a good alternative to product variations in case you want more flexibility. For example, you can add extra checkboxes and various other options.
Step 2: Install and activate the WooCommerce Product Table plugin
Next, you can start displaying your foods in a one-page WooCommerce POS food order form:
- Get the WooCommerce Product Table plugin and copy your license key from the confirmation email.
- Navigate to Plugins > Add New from the WordPress dashboard and upload the plugin’s zipped file to your website. Once that’s done, hit the Activate.
- Head over to WooCommerce > Settings > Products > Product Table and paste your license key into the License Key input field.
Step 3: Configure the WooCommerce Product Table settings
Now that you have the WooCommerce Product Table plugin installed and activated on your website, you can configure various options on its Settings page. This will make the WooCommerce POS food order form look the way you want it to on the front-end.
3a. Decide which columns you’d like to display in the table
Since you’re creating a quick order form for your restaurant’s waiting staff, choose columns that will make the food ordering process most efficient for them. As a bare minimum, include columns for the food item’s name, price, and add to cart button. For this, you can simply add name, price, add-to-cart to the Columns option.
You can also choose to include an image of the food item if that would make it quicker for the waiting staff to identify an item on the menu. Simply enter image, name, price, add-to-cart to the Columns option.
You might also consider including the menu item’s SKU and stock in your POS food ordering form. Customers often request foods by referencing a code on the printed menu. For example: “We’d like two number 9’s and a number 14 for dessert”. This way, your restaurant’s waiting staff can add the menu item’s SKU to the search box or sort by SKU to quickly find the dish the customer would like to order.
I also recommend including a stock column in your food processing form. This is a great way for the kitchen staff to keep the waiting staff up to date with the availability of each dish. Just make sure kitchen staff have access to the WooCommerce back end in the WordPress admin, so they can update stock availability in real-time.
Here’s a complete list of available columns that you can pick from and display in your WooCommerce POS food order form.
3b. Configure additional settings
There are a number of different options that you can configure from the WooCommerce Product Table’s settings screen. However, our goal is to make it as quick as possible for the waiting staff to select products and place a customer’s order. For this reason, I’d recommend making the following configurations:
Under the Table content section
- Enter none in the Product links section. There’s no need for waiting staff to visit the single product page, and disabling the links prevents accidental clicks/taps.
Under the Add to cart column section
- Make sure the Quantities checkbox is ticked so that staff can increase the quantity for each item.
- Set the Variations option to Show as dropdown list. If you’re using variable products, this will add a dropdown listing the options to the add to cart column.
Under the Table controls section
Set the Search box option to position the product search box Above table. Your restaurant’s waiting staff can use the search box to quickly find the dish the customer ordered. For example, they can enter the food item’s name or SKU.
I recommend adding filters for information you’ve added about your menu items such as product tags, categories or attributes. Filters make it easy for the waiting staff to quickly find specific types of dishes. To do this, set the Product filters option to Custom and then add tags,attributes to the Custom filters option.
Here’s a complete list of the various filter options you can set for your food order form.
These configuration settings are optimized to deliver a good user experience for taking WooCommerce POS food orders at the counter or table using an iPad/tablet.
Step 4: Create a one-page WooCommerce POS food order form for waiting staff
By now you’ve set up the WooCommerce Product Table plugin on your WooCommerce restaurant site and configured its settings. Next, we’ll create a simple, one-page food order form for waiting staff to take food orders at the counter or table using an iPad/tablet. We’ll do this by adding the WooCommerce Product Table plugin’s shortcode to our food ordering system page.
- Create a new page for your WooCommerce POS food order form by navigating to Pages > Add New from the WordPress admin. Waiting staff will use this one-page food ordering form to select foods, add them to the shopping cart, and place an order.
- Give the new page a title. I’ve called mine Food Ordering System.
- Add introductory text in the text editor if you’d like to display information on the order form.
- Create sub-headings (Starters, Main Course, or Beverages) for each section of your menu.
- Under each sub-heading, add the shortcode
[product_table category="category-slug"]to display food items from the relevant category. If you wanted to display items categorized under Starters, you’d use the shortcode
- Publish the page and click the Preview button to view it. It should look something like this:
Step 5: Simplify the checkout process for waiting staff
Since we’re using WooCommerce, the waiting staff will have to complete the required checkout fields and click the Place Order button to place the customer’s food order. That’s because WooCommerce is normally used for taking customer orders. Our needs are slightly different because waiting, bar or behind-the-counter staff are using it to to take orders on behalf of the customer. Therefore, we want to make the checkout process as fast as possible.
You can do this by configuring the checkout page to accept payment after placing the order. This way, the waiting staff doesn’t have to make a payment when they place the order. Here’s what you need to do:
- Head over to WooCommerce > Settings > Payments from the WordPress admin panel.
- Select an offline payment method such as Check payments or Cash on delivery. This way, the waiting staff will be able to place the customer’s order without actually having to pay.
- Click the Manage button to rename the payment method or add a description. For example, if you have selected ‘Check payments’ then you can rename this to something like ‘Payment required at end of meal’.
- Click the Save changes button to proceed.
Now, your checkout page should look something like this:
By default, WooCommerce requires the waiting staff to fill out the Billing details form. You can use the Checkout Field Editor plugin to remove the Billing details fields and make the checkout process even faster for the waiting staff. Alternatively, create a shared user account for your staff to use, and enter the default billing details for your restaurant. That way, this information will be auto-populated for each order and they can ignore this page and just click the ‘Place order’ button to send the order to the kitchen.
Bonus tip: Use one-page checkout to put the POS order form and checkout on the same page
Want to speed up your WooCommerce POS system in further? You can do this by adding the WooCommerce checkout to the same page as your WooCommerce Product Table order form. This removes the need to waste time clicking through to the cart and checkout pages.
There are two ways to do this:
- Add the shortcode
[woocommerce_checkout]underneath your POS order form. This will add the default WooCommerce checkout immediately underneath the order form.
- Alternatively, you can use the official WooCommerce One Page Checkout plugin with WooCommerce Product Table. This has extra features, such as the ability to edit the contents of the cart from directly within the one-page checkout.
Bonus tip: Let customers pay by credit card
If you want customers to be able to make a credit card payment directly into the WooCommerce POS system, that’s fine too. There are a few ways to do this:
- Add an additional payment method such as Stripe, and customers can enter their credit card details directly into the checkout page. (If you want to be able to scan their card, then you’ll need to use a separate card reader and process payment outside of the WooCommerce order system.) Obviously, this only applies when you are taking orders from customers in person and not for phone orders!
- If the customer will be reading out their credit card details over the phone, then you still need to add a credit card payment method such as Stripe. Add the products to the cart and proceed to the checkout as usual, and then enter their payment details on the checkout while they’re still on the phone. Submit the order and only end the call when you see the order confirmation page – this means that the credit card payment has been processed successfully.
Bonus tip: Add extra fields to store the customer’s table number, token number, or name
Taking POS food orders at the counter or table using an iPad/tablet becomes even easier if you can add additional information directly to the order form. If the waiting staff need to note down any additional information, they’ll need an extra field or two. This could be:
- Customer’s name.
- Customer’s table number.
- Token number.
The Checkout Field Editor plugin allows you to add, edit, and remove the fields shown on the WooCommerce checkout page. Use this to add an extra field to the checkout form which allows the waiting staff to input the customer’s table number, token number, or name.
Step 6: Automatically mark orders as complete
WooCommerce normally requires payment before it will mark orders as complete. This isn’t relevant to you, because you will be taking payment outside of the website – e.g. at the end of the meal.
Use the Order Status Control WooCommerce plugin to automatically mark all orders as complete. This ensures they are correctly sent to the kitchen without any further manual steps.
Step 7: Send orders to the kitchen
By default, there are 2 ways for the chefs in the kitchen to see new orders:
- WooCommerce will send new orders to the email address added in the settings.
- If the kitchen has access to the WordPress admin, they can keep the WooCommerce orders page open and refresh it regularly to see new orders.
If you’d rather have new food orders printed automatically to the kitchen printer, then you can do that too. You can pair your WooCommerce-based food ordering system with a GPRS printer. This way, you’ll be able to automatically print new food orders straight to the kitchen printer as soon as the waiting staff has placed the customer’s order.
Step 8: Hide the food order system from public view
You might be adding your WooCommerce POS food order system to an existing WordPress site. For example, maybe you use WP for your public restaurant website.
If this applies to you, then you’ll want to use the food ordering system from public view. It should only be available to staff who take orders at the table, bar or counter.
A quick solution is to password protect the page containing the POS food ordering system. This way, only staff with the correct password will be able to access the food ordering system.
However, your food ‘products’ will still appear on other parts of your site such as in search results. To fully hide all parts of the WooCommerce POS order system from public view, you’ll also need the WooCommerce Private Store plugin. This adds the extra security you need.
In the WooCommerce Private Store plugin settings, choose the same password as you used to protect the food order form page. That way, staff just need to enter one password and it will unlock the ordering page and all other parts of WooCommerce.
A feature-rich WooCommerce POS food ordering system for your restaurant or food business
It’s easy to create an efficient (and accurate) POS food ordering process for your waiting staff, counter and bar staff.
With the WooCommerce and WooCommerce Product Table plugins, you can create a searchable, sortable food order form for your restaurant. This makes it easy for waiting staff to take food orders at the counter or table using an iPad/tablet.
You can take things to the next level whenever you’re ready. Simply upgrade your restaurant’s food ordering system by pairing it with some of the other plugins we mentioned.
Be sure to check out our complete guide on creating a restaurant ordering system with WooCommerce for more information.
What are some of the features you’d like to see in a WooCommerce POS food ordering system that facilitates taking food orders at the counter or table using an iPad/tablet? Let us know by commenting below!