1. Knowledge Base
  2. WooCommerce Restaurant Ordering
  3. Setting Up Your Restaurant Ordering System

Adding a sidebar or cart to your restaurant ordering pages

Most restaurant websites display the contents of the customer’s cart on the main order page, so that they can see their order and the total price as they continue adding foods. There are several ways to do this with WooCommerce Restaurant Ordering.

Add the default WooCommerce cart widget to the page sidebar

WooCommerce Restaurant Ordering cart widget

WooCommerce itself comes with a ‘Cart’ widget which you can add to your restaurant ordering pages. To do this, the page must have a widgetized sidebar.

WooCommerce Restaurant Ordering works with the page layouts that are provided in your WordPress theme. Most themes come with a choice of templates which allow you to create full-width pages, or pages with a left or right sidebar. Use these templates to choose a suitable layout for your food ordering pages.

For example, a lot of restaurant ordering systems have a right sidebar containing the cart. You can do this by choosing a page template in your theme that has a sidebar, and then going to Appearance → Widgets in the WordPress admin. Add the widgets that you would like to show in the sidebar.

For example, you might want the following widgets:

  • The ‘Cart’ widget that comes with WooCommerce itself. This will update when customers add foods to the cart, so they can always see what is in their order and the total price,
  • A ‘Text’ widget allowing customers to choose a time slot for delivery or collection (if you are using WooCommerce Restaurant Ordering with the Delivery Slots plugin).
  • A ‘Text’ widget containing your opening hours.

The following screenshot shows a ‘Choose a Delivery Slot’ text widget and the WooCommerce ‘Cart’ widget:

WooCommerce restaurant order form with cart

Install a floating cart plugin

WooCommerce restaurant floating side cart

WooCommerce Restaurant Ordering works with most plugins which display the cart in a popup window on the page. We particularly recommend the free Woo Floating Minicart plugin.

The benefit of using a floating cart plugin is that you don’t need to add a sidebar to the page. This gives you more room to display your foods.

Show an ‘Added to cart’ popup

WooCommerce food order added to cart popup

When you add foods to your order, a green success message appears at the top of the page. If you would like to show more information about the product that has just been added, then you can do this using the free WooCommerce Added to Cart Popup plugin.

Still need help?
If searching the knowledge base hasn't answered your question, please contact support.

Related Articles