Creating a Seamless Online Food Ordering System with WooFood Plugin

Enhancing your website with an online food ordering system has never been easier, thanks to the WooFood plugin. This versatile tool allows you to seamlessly integrate a customized food menu into your website, complete with a user-friendly interface that lets you style your menu to match your brand.

Step 1: Install WooCommerce

To begin crafting your tantalizing food menu using WooFood, the first step is to install the WooCommerce plugin. Once WooCommerce is up and running, you’re ready to start adding your delicious offerings to the menu.

Step 2: Crafting Your Food Menu

Let’s dive into creating your menu items as products. Navigate to “Products” and select “Add New.”

Adding New Product on WooCommerce

Choosing the Right Product Type

There are two main product types: Simple and Variable Products. The choice depends on the flexibility you want to offer your customers.

  • Simple Product: Opt for this type if your menu item is fixed and doesn’t require any customizable options like size or toppings.
  • Variable Product: This is your go-to if your menu items are adjustable. It enables you to create variations of a product with different prices, perfect for items like pizzas with varying sizes and prices.

Variable Product on Food Menu

On the above example a Pizza item is a variable product with 3 Size variations and different pricing on each variation . Let’s see also how a variable product look like on the backend side and how it’s configured

Step 3: Defining Attributes

Creating attributes on WooCommerce Product

Before creating variations, set up attributes like “Size.” Under the “Values” option, list attributes separated by “|” (pipe). Don’t forget to check “Used for variations” to enable further customization.

Step 4: Creating Variations

Head to the “Variations” tab. Instead of crafting variations one by one, use the “Create Variations from all attributes” dropdown option. Confirm the creation of variations when prompted.

Creating Variations for a food menu item on WooCommerce

To do it , you will have to select from the dropdown option the option “Create Variations from all attributes“. Press the “Go” button. After that the system will ask you for confirmation if you want to create 3 variations and you will press “Ok” to confirm it.

After that your variations will like this

variations table woocommerce

Step 5: Pricing Your Variations

Expand the variations options and set the pricing for each. Simply press the small “arrow-down” icon, then input your prices. Don’t forget to save your changes.

Variation Configuration WooCommerce

After settings all the prices by setting on the regular field the price you want. Don’t forget to press the “Save changes” button on the bottom of the variations .

Step 6: Adding Extra Options

While WooCommerce doesn’t inherently support add-ons like toppings, you can extend its functionality with the WooFood plugin.

Creating Extra Option Categories

Go to WooFood > Extra Options Management and click “New Extra Option Category.

Creating Food Topping and Extra options

Group Title

On the Group Title type the name you want to appear on the top of the extra options, like “Sides”, “Sauces” etc..

Visible As

This option allow you to display a different Group Title to the frontend customers and have the Group title option for internal use. Very handy option if you have too many extra option categories with the same visible name and different internal

Type

Checkbox Multi-choice : Select this option if you want to offer multiple selections of extra options with no restrictions on the number of options .

Limited Choice: It’s exactly like the multi-choice with the only different that you can limit the maximum number of selections by setting the Maximum Options field to the maximum number of choices that allowed to be selected .

Single Choice Radio: Radio button options with single choice select . Ideally suits best to an option like “Roasting” when a single option is allowed for selection . (“Rare”, “Medium”, “Well”)

Single Choice Select: Same behaviour like single choice radio but in Dropdown option instead of radio buttons .

Style

Styling option has 2 different options , “Accordion” and “Flat”.

Accordion: Extra Options will appearing inside a collapsed accordion . Ideal solution if you have more than 1 extra option categories assigned to the product

accordion food toppings collapsed
accordion food toppings

Flat: As the name says, flat option will display extra options with a flat display format like on the following picture. Mainly used when only one extra option category is per product.

flat food toppings style

Assigning Extra Options on a Variable Product

Navigate to Product Edit and go inside Variations Tab. You will see a screen where you can select the extra option categories you have created before to the variation.

toppings, side selection on variable product

Select all the Topping groups you want to appearing on this variation. You can always select different extra options for each variation.

More Options for your Food Menu

Our Food Delivery Plugin, WooFood, having too many options and very useful for your operation like the following.

  • Delivery Hours
  • Takeaway Option
  • Distance Restriction
  • Automatic Order Printing