Creating food order forms
The WooCommerce Restaurant Ordering plugin provides 3 ways to create online food order forms.
Default 'Restaurant Ordering' page
Use this if you want to list all your food products on one page automatically.
When you install the plugin, it creates a 'Restaurant Ordering' page. This page lists all the food products from the categories selected on the plugin settings page.
You can find the 'Restaurant Ordering' page from the main 'Pages' list in the WordPress admin. We recommend adding a link to this page to your navigation menu. You can rename it to anything you like, e.g. 'Takeaway Ordering' or 'Order Food Online'.
The foods from each category are listed separately, and you can re-order the categories on the plugin settings page. You can also choose whether or not to show the category name and/or description above the foods from each category.
If you'd like to use the main WooCommerce Shop page as the Restaurant Ordering page then that's fine - simply select it on the plugin settings page.
If you do not need this page then you can delete it.
Create food order forms using a shortcode
Use this if you want to structure your food ordering system across multiple pages; list categories within a tabbed layout; or if you want each order form on the page to have different settings.
For extra flexibility, WooCommerce Restaurant Ordering comes with a shortcode that allows you to list foods anywhere on your site. The basic shortcode is [restaurant_ordering]
and is automatically added to the default 'Restaurant Ordering' page.
Used alone, the shortcode lists all the food products from the categories selected on the plugin settings page. It also inherits the global options from the settings page, such as whether to include an image and description of each product.
You can use the following shortcode options to override any of the global settings and customize each food order form individually. Add as many shortcodes as you like, each one with different categories and settings.
categories
To specify which categories to include, enter a comma separated list of the category slugs. You can find the category slug on the 'Add/Edit Category' page under Products → Categories.
Examples:
[restaurant_ordering categories="starters,mains,desserts"]
[restaurant_ordering categories="pizza"]
Note: This option only works with the category slug (e.g. main-courses), and not the category name (e.g. 'Main Courses' ) or ID (e.g. '842').
restaurant_info
Set this to "true"
or "false"
, depending on whether you want to display the restaurant address, open/closed message and delivery information above the food order form.
Examples:
[restaurant_ordering restaurant_info="true"]
[restaurant_ordering restaurant_info="false"]
menu_navigation
Set this to "true"
or "false"
, depending on whether you want to display jump links to each category at the top of the food order form.
Examples:
[restaurant_ordering menu_navigation="true"]
[restaurant_ordering menu_navigation="false"]
category_titles
Set this to "true"
or "false"
, depending on whether you want to display the title of each category (e.g. "Starters") above the list of foods from that category.
Examples:
[restaurant_ordering category_titles="true"]
[restaurant_ordering category_titles="false"]
categories_with_hidden_title
If you want to display the title and description for most of your categories, while hiding this information for specific categories only, then you can use this option to enter a comma separated list of the categories for which you want to hide the information. These categories will never have a title or description displayed, regardless of the category_titles
and category_descriptions
options. You can use either category slugs or IDs.
[restaurant_ordering categories_with_hidden_title="starters,desserts"]
category_descriptions
Set this to "true"
or "false"
, depending on whether you want to display the description of each category above the list of foods from that category.
Examples:
[restaurant_ordering category_descriptions="true"]
[restaurant_ordering category_descriptions="false"]
product_image
Set this to "true"
or "false"
, depending on whether you want to include product images in the food order form.
Examples:
[restaurant_ordering product_image="true"]
[restaurant_ordering product_image="false"]
image_size
Use this to change the size of the square images in the food order form. The default is 130 pixels.
Examples:
[restaurant_ordering image_size="100"]
[restaurant_ordering image_size="250"]
image_position
Set this to "left"
or "right"
to control whether product images (if shown) appear to the left or right of each food product.
Examples:
[restaurant_ordering image_position="left"]
[restaurant_ordering image_position="right"]
product_description
Set this to "true"
or "false"
, depending on whether you want to include the description of each product in the food order form.
Examples:
[restaurant_ordering product_description="true"]
[restaurant_ordering product_description="false"]
description_length
Set to "limited"
to automatically shorten/truncate the product descriptions in the food order form; or "full"
to show the full description.
Examples:
[restaurant_ordering description_length="limited"]
[restaurant_ordering description_length="full"]
buy_button
Set this to "true"
or "false"
, depending on whether you want to show the buy ("+") button in the food order form. If this is set to false, then customers can click on each product in order to open a lightbox, from which they can add to the cart.
Examples:
[restaurant_ordering buy_button="true"]
[restaurant_ordering buy_button="false"]
columns
This option controls the number of columns in the food order form. You can choose between a 1
, 2
or 3
column layout.
Examples:
[restaurant_ordering columns="1"]
[restaurant_ordering columns="2"]
order_type
This option controls whether clicking the Add button adds simple products directly to the cart, or opens a product lightbox first. (Note: The lightbox is always used for variable products and products with add-on options).
Examples:
[restaurant_ordering order_type="quick"]
[restaurant_ordering order_type="lightbox"]
duplicate_products_in_parent_category
Set this to "true"
or "false"
if you have products which are in both a parent and a child category, and you want to prevent duplicates from appearing in the food order form. When set to "true", the product will only show in the child category.
Example:
[restaurant_ordering duplicate_products_in_parent_category="true"]
Combining shortcode options
You can combine the shortcode options by adding a space between each one. For example:
[restaurant_ordering categories="pizza" category_titles="true" category_descriptions="false" product_image="true" product_description="false" buy_button="true" columns="2" order_type="lightbox"]
Display food order forms on product category pages
It's also possible to enable the food order form on the product category pages which are created by WooCommerce itself. This is a good option if you want to display the products for each category separately, instead of on a single page.
To do this, simply enable the 'Category pages' option on the plugin settings page.