Adding a sidebar or popup 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.
Install a popup cart
The most effective way to allow customers to complete their orders more quickly and easily is to install the WooCommerce Fast Cart plugin. This is designed to work alongside WooCommerce Restaurant Ordering and adds a floating cart to your food ordering pages.
When a customer adds food items to their cart, either a floating cart icon or an 'Added to cart' popup appears. Either way, they can use the popup cart to review their selections, make changes, and quickly complete their order.
As well as the popup cart, WooCommerce Fast Cart provides a popup checkout. This allows customers to enter their details and pay without ever leaving the food ordering page. It's much faster than using the standard WooCommerce cart and checkout pages, and can therefore increase your sales by providing better customer experience.
You can choose whether to use the popup cart and checkout; or skip the cart completely and open the checkout as soon as customers add foods to the cart. This is the fastest possible way to place food orders.
Another 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.
Add the default WooCommerce cart widget to the page sidebar
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. (If you need the full width of the page for the food order form, then install the WooCommerce Fast Cart plugin instead.)
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:
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.