1. WooCommerce Restaurant Ordering
  2. 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

Can I hide the 'Cart' link?

You may notice that we've hidden the 'View cart' button from the widget in the screenshot at the top of this article. If you'd like to do this on your own site, then we've provided a code snippet to help with this.

Install a floating cart plugin

WooCommerce restaurant floating cart

WooCommerce Restaurant Ordering is designed to work with the WooCommerce Fast Cart plugin to add a floating cart to your food ordering pages.

The benefit of a floating cart 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.

Related Articles

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