Reading time: 10 mins. 
Implementation time: 50 mins.

Page with meals categories

Meals list page

A good pizza place needs attractive and informative pizza menu. Have a look at a pizza menu we created with FW Food Menu. A live version is available on FW Food Menu Pizzeria showcase demo.

Reading time: 10 mins. 
Implementation time: 50 mins.

Check out our Pizzeria restaurant Guide for more details on configuring Pizzeria menu. The pizzeria menu should be intuitive, well-organized, and attractive so the customer could be inspired by your menu and easily find out what’s included into a desired Pepperoni pizza.

Our Pizzeria menu is a great example of an effective and good-looking 3 columns menu with beautiful meals images, stylish meals backgrounds, tiered pricing, and descriptions of ingredients. You can create the same pizza menu all by yourself, and you don’t need to be a professional. This showcase can be a good fit to any other fast food restaurant type -  fish and chips, sandwiches, hamburgers, tacos, ice cream, etc. The only difference will be in meals’ types and the number of categories you will need to create. We will describe the page of the menu, its elements, and the business idea behind each element. Make sure to understand that to proceed with creating the same menu you need to prepare media content and install FW Food Menu to your Joomla website. To learn how to get started with FW Food Menu, review Getting started documentation page. If you have media content and FW Food Menu ready, it takes less than one hour to create a similar online menu. The overall process for creating such a menu looks as follows:

1. Prepare media content - images of different pizza types (30 mins).
2. Install FW Food Menu to present your online menu with a simple and elegant design that fits your pizza place (5 mins).

3. Display all meals to show their images, pricing, portion sizes, and descriptions (40 mins).
4. Configure promo options to highlight and style specific meal items (5 mins). Let’s review the Pizzeria restaurant menu we created below. Pizza menu page

Pizza menu page

A pizza menu should be colorful with appetizing images and complete details. A customer should be able to look through the menu before they start ordering. Make sure you have a clear list of the meals you have on offer. Aside from a clear list, it is also a great tool that you can promote your meals with.

This page is created based on the Menu layout allowing to display a category along with meals included in this category on the same page. The meals are arranged in three columns and each meal has a list of ingredients, available sizes and respective price for each size. Some of the meals are marked with Recommended and New promo emphasizing that the meal is worth paying attention to. Let’s review each element of the menu below:

1. Page title. A title of the Pizzeria restaurant.

2. Menu section title. A clear title of the menu section. You can add as many menu sections as it is provided by your menu.

3. Menu section description. We added a text and image for a menu section description. You can add either of them or both.

4. Meal. Meal referring to the Pizza category.
5. New promo. A new meal highlighted with a blue label. You can choose between 4 promo options - Special, Recommended, New, and Meal of the Day. Each promo is styled differently.
6. Meal background image. We placed a paper styled background image for each meal. Aside from a background image, you can set a background color.
7. Meal image. An appetizing meal photo attracting the eye.


8. Meal title. A beautifully styled and easy-to-find meal title.
9. Meal description. A description of meal ingredients to provide your customers with more details.

10. Prices and sizes. Clear pricing terms outlining meal sizes and corresponding prices for each size.

Our Pizzeria menu features a simple layout and design, allows to emphasize specials, style meals with beautiful background images and color, and many more. We have clearly outlined all the steps for creating such a menu in our Pizzeria Restaurant guide. Should you have any problems while configuring the menu, feel free to ask questions in the comments section at the bottom of the documentation page or contact us using General Questions form in your Client Section.

New:

• Category layout. We created a new layout for meal categories. If earlier categories and meal items were displayed on the same page, now meal categories are the top-level categories leading to a meal items page. The categories are styled with meal images slideshow displayed on hover. You can add a short description to a meal category, for example, a price range or any other specific information. 

• 3 columns layout. We added a parameter allowing to set 3 columns menu. Works perfectly with the image on top new parameter. As a result, the menu looks differently and engaging.

• Image top/right/left parameter. We added a parameter allowing to choose where you want an image to be shown in relation to the text description. This feature adds flexibility to configuring your menu. 

• Meal item color and image background. We added parameters allowing to configure meal item background. Now the meal item background can be styled with different color or image. However, promo meals styling will still overwrite default coloring.

• Recommended promo option. We added a new badge to indicate meals you want people to pay attention to. Now you have more options for promoting your special meal items.  

• Category description left/right parameter. We added a new parameter allowing to place category description at the right/left of the meals columns. Now you can keep the text on the side and show meals in column(s) rather than underneath.


Updates:

• Promo Category filter. The parameter allows to group not only categories but also promo options to show them on a separate page and style the way you need.

Fixes:

• Cascading layout description. We missed description for Cascading layout. Now it is there.

• Select categories for Cascading menu. We added select categories parameter to Cascading layout settings. Now you can choose the categories you want to display on the separate page.


New:

• Cascading Menu Layout. This feature allows breaking your menu into categories’ tabs allowing to easily switch between multiple categories within the menu. As a result, you create a menu that works differently and looks more organized and structured.

• Promo options display in a category filter. We have added a parameter which helps to show only deals on the separate page. You can choose to display either all promo options or the specific ones. 

• Native Food Menu CSS file in the admin section. We have added the native Food Menu CSS file in Admin section so you could edit Food Menu CSS styles directly via Joomla admin panel.


Updates:

• Renamed Default design to Italian. Following our customers' requests, we have renamed Default design to Italian. The Default title caused confusion with a default option that sets a priority between menu item and global settings.   


Bug fix:

• Category Layout title display. Fixed the display of menu item title.

• Category Module design and title display. Fixed the display of the module design and title.

• Descriptions for CSS Style section. Added descriptions to CSS Style section to help understand how to customize CSS to avoid loss after updates.

• Removed decimal zeros from menu prices.  The menu prices displayed with decimals which make no sense. 


Taking orders online has become a necessity for food industry in our pandemic situation. While most people would prefer to hang out with their friends in bars and restaurants face to face, online orders have always been part of a business that had a huge potential and a growing demand. There are businesses that only sell food online, which demand a very friendly ordering service and of course high quality food.

When we think of our favourite food places we imagine an atmospheric website design with interior images, actual menu with prices, locations, working hours, etc. These websites is a huge part of food industry market, but it is very rare when local food places have online food ordering option available. At best you can expect a link to a 3rd party platform where food is sold in a totally different environment and with minimal design references to a place a customer buys from. From the other hand it does the job and these solutions are popular among local providers.

Our today's topic can be an answer to both local food places owners and online food ordering systems. Why not adding an ordering option if you already have a website. Also, if you have an ordering website you can check if your process is smooth enough or it may benefit from replacing your current system with FW Food Menu plugin for Wordpress. All written below would refer to Wordpress websites.

Assuming you have a Wordpress website online and Admin access to it we will show how to turn it into online food ordering system and start taking orders online in 10 mins. The main steps are:

1. Install & verify FW Food Menu plugin - 1.5 mins
2. Create an order page - 1.5 mins
3. Add food categories (4 items) - 0.5 mins
4. Add meals to the categories (39 items) - 1.5 + 1.5 mins
5. Adjust order page layout - 1 min
6. Configure payment - 3 mins
7. Take your first order!

For payment options you will need at least 30 days subscription to FWFM Order Online add-on, which currently costs $34.99 USD. If you skip this option you will get a nice looking responsive online menu. Since our goal was to take orders online you will need that add-on which comes with PayPal and Stripe integrations that cover the most popular card payments and online PayPal payment.

Before we start make sure you are logged into your Wordpress admin, get your stopwatch handy... Ready. Steady. Go.

1. Install & verify FW Food Menu plugin

1. Download FW Food Menu ZIP installation file from the official FW Food Menu page.
   Make sure you are logged in before you download free FW Food Menu plugin. If you don't have an account, register beforehand, please.
2. Open your Wordpress admin.
3. Go to Plugins section, click Add New button on top and then Upload Plugin button.
4. Select FW Food Menu ZIP file you downloaded and click Upload button.
5. Once installation is complete hit Activate button.

Alternatively you can install from WP Admin -> Plugins -> Add New section by typing in "FW Food Menu" in a search box and hit Install button.

Congratulations! You have FW Food Menu installed on your Wordpress website.

In order to verify a website we need go to WP Admin -> Dashboard, enter Acess Code in verification box and click Verify button.

Access code is a unique customer code that can be found in Client Section on fastw3b.com.

Congratulations! Now you can install free add-ons and updates, use Fastw3b support and purchase add-ons in case of need.

2. Create an order page

1. Go to WP Admin top panel, hover your website name and click View Site menu item. Better keep it open in a seperate window so you can make changes and check your progress by refreshihng this page.
2. Open "Hello World" post by clicking the title and edit it with Edit link.
3. Rename it to "Order Page" and replace text with [fwfm_menu] shortcode.
4. Now Updatechanges and click View Post link.

Congratulations! No you have empty FW Food Menu which will be filling with content and new options in a few minutes.

3. Add food categories

To avoid dummy texts and made up examples we went to Trip Advisors's Boston quick bites directory and picked a random food place which turned out to be Thinking Cup Boston. Luckily they had a website with a very typical menu. This is a perfect example to see how easy you can turn a regular website into online food ordering website.

They have 4 categories:

Coffee
Tea & More
Breakfast
Sandwiches

1. Go to FW Food Menu -> Categories in WordPress admin.
2. Click Quick Categories button on top.
3. Copy & paste 4 categories from above into Quick Categories modal window. No need to select parent category as we want them to be top-level categories.
4. Click Process button.

Congratulations! You added 4 categories to your future online menu.

4. Add meals to the categories

Thinking Cup website has different types of meals in terms of data format, also there are meals with price layers. For a start we will ignore long descriptions and will only use first price to get meals imported into categories. All other details would be a good reason to write another post on how to make this menu perfect and add enhancements to make online menu really user friendly and intuitive.

After spending few minutes for copying meals into text file and edit them in a "meal name = price = meal description" format we have 4 blocks ready for import.

Please note that we removed $ dollar signs as a currency would be set in FW Food Menu Settings.

1. Go to WP Admin -> FW Food Menu -> Meals.
2. Click Quick Meals button in top toolbar.
3. In Quick Meals modal select Coffee category and paste 13 meals for this category. See below.
4. Click Process.

Repeat for 3 other categories. Paste items for a category you selected and insert into Quick Meals modal window.

Coffee (13 items)

Coffee = 1.50
Iced coffee = 2.75 = Brew.
Café Au Lait = 2.90 = Coffee with steamed milk.
Espresso = 2.75
Macchiato = 3.00 = Espresso with a dollop of milk.
Latte = 3.50 = Espresso with foamed milk.
Cappuccino = 3.50 = Espresso, steamed milk and milk foam.
Mocha = 2.50 = Espresso, premium home made chocolate sauce and foamed milk.
Americano = 2.75 = Espresso and hot water.
Pour over = 3.30 = Check Board for Single Origins
Hazelnut latte = 4.00 = With Freshly Roasted Hazelnut Paste
Vanilla Ginger latte = 3.90 = Our Original Home Made Syrup
Honey Cinnamon Latte = 3.90 = Our Original Home Made Syrup

Tea & More (5 items)

Hot Tea = 3.00 = Blue Flower Earl Grey, English Breakfast, Decaf English Breakfast
French Hot Chocolate = 3.95 = 64% Tainori Valhrona Drinking Chocolate
Chai Latte = 3.50
Iced Tea = 2.00 = Bergamot Black, Golden Green, Crimson Berry
Orange/Grapefruit Juice = 2.95 = Freshly Squeezed.

Breakfast (12 items)

Egg & cheese sandwich = 2.95
Breakfast Sandwich = 4.95 = Choice of Sausage, Bacon or Ham with Egg and Cheese on English Muffin
Smoked Salmon on Bagel = 7.50 = with cream cheese, tomato, and red onions
Cage-free Eggs = 6.95 = with potato, nitrate-free bacon, and gruyere or with Spinach, Roasted red peppers and mushroom.
Breakfast Burrito = 5.95 = Choice of Sausage, Bacon , Ham or Chorizo with Egg, Salsa, Black Beans, Pepper-jack Cheese on flour Tortilla
Bagels = 2.00 = Plain, Wheat, Everything, Cinnamon Raisin with Butter 2.25 with Jelly 2.50 with Cream Cheese 2.75
Croissant = 3.00
Chocolate croissant, almond croissant = 3.50
Scone = 3.25 = Cherry Ginger, Lemon Poppy Seed
Muffin = 3.00 = Blueberry, Morning Glory, Raspberry Yogurt (seasonal)
Oatmeal = 3.95
Toppings = 0.50 Almonds, Bananas, Raisins, Strawberries, Walnuts, Apples, Cranberries, Blueberries, Brown Sugar, Honey, Maple Syrp

Sandwiches (9 items)

Grilled Cheese = 6.95 = Choice of bread, cheese and plenty of add-ons
The Italian = 8.95 = A mixture of sweet and spicy Italian cold cuts, sharp provolone cheese, red wine vinaigrette and arugula on house baked bell pepper focaccia bread
Jittery Hen = 8.95 = Stumptown coffee braised chicken, house-made BBQ sauce, pickles and smoked gruyere cheese on sourdough bread
B.A.L.T = 8.95 = Applewood Smoked Bacon, Hass Avocado, romaine lettuce, vine-ripe tomato and house made aioli on sourdough bread
Classic Turkey = 8.95 = Maple turkey, swiss cheese, dijon mustard, romaine lettuce, vine ripe tomato pressed on multigrain bread
Smoking Jamaican = 8.95 = Jerk-spiced turkey, roasted red'n yellow peppers, havarti cheese, mango chutney,pickled jalapenos, pressed on toasted multigrain bread
Roasted Chicken = 8.95 = Buttermilk marinated chicken tenders, havarti cheese, roasted wild mushrooms, vine-ripe tomato, romaine lettuce, sweet'n'spicy mustard pressed on multigrain bread
Jimmy the Greek = 8.95 = Red bell pepper hummus, artichoke hearts, kalamata olives, vine ripe tomato, roasted wild mushrooms and goat cheese on multigrain bread
Barcelona Bliss = 8.95 = Spanish cured dry chorizo, Aged manchego cheese, roasted garlic aioli and green olive spread on a crusty french roll

After we add meals for all categories let's go to Order page and check the results.

Well done! Now we have 4 categories with real meals on our order page.

5. Adjust order page layout

If we compare the original menu page and what we currently have we will notice that our version is 1 column menu while source has 4 columns which looks much nicer and occupies less space on a screen. Let's do the same.

We need to set global columns rows to 4 while number of columns inside categories should be 1. Since all categories inherit global/parent settings we will have to change number of columns in categories to avoid funky layout.

1. Go to Admin -> FW Food Menu -> Dashboard.
2. Find Add-ons section and click Install button for FWFM Columns add-on.

We can install FWFM Colums right from add-ons section because it is a free add-on. Purchased add-ons will only appear if plugin was verified (see step 1).

When installation is complete, do the following:

1. Go to Admin -> FW Food Menu -> Settings -> Design & Layout tab.
2. Find Columns in a row parameter and set it to 4.
3. Allow category break parameter must be set to Deny.
4. Let's also set Align meal content and Category alignment to Center.
5. Go to Admin -> FW Food Menu -> Categories.
6. Select all categories.
7. Click Batch Operations button in a tool bar.
8. Set 1 column and click Process.

Congratulations! Now you have 4 columns menu. Refresh Order page and check results.

6. Configure payment

Before we go to configuration and have Online ordering configured we need a paid FWFM Online Order add-on. To get add-on right from your website you need to:

1. Go to WP Admin -> FW Food Menu -> Add-ons.
2. Find FWFM Order Online add-on and click Add-on details button.
3. In a pop-up window you should select 30 days or 12 months subscription. Let's go for 30 days for a test, but we definitely recommend get a 12 months subscription.
4. When you click 30 days button your cart will be updated.
5. Close add-on window and click Checkout button on top of Add-ons page.
6. Make the payment and get back to your Wordpress Admin.
7. Go to Admin -> FW Food Menu -> Dashboard -> Add-ons section and find FWFM Order Online with Install button next to it.
8. Install FWFM Order Online and go to  Admin -> FW Food Menu -> Settings -> Add-ons tab.
9. Let's add notification email where we will receive all orders.
10. Set order shift for 2 hours to make sure it can be ready in time.
11. Add a local tax of 7% for all meals which will not be included in meals prices.
12. Enable Show Cash parameter, considering we will have Takeaways for now.
13. Thinking cup has 3 locations. Let's add Takeaway deliveries with 0 cost and without Show Address and Show in total options and call them "BOSTON COMMON", "NORTH END" and "BACK BAY" to allow customers where to pick their orders.
14. Add an order message "We will call you back in 5 mins after order is made." to let customers know what will happen after order is made.

Done! Now we are ready to take the first order!

7. Take your first order

Go to an Order Page and add some items to an order. Try to edit order and add/delete items forth and back. When you are done click Checkout button and fill in Checkout form. After all fields are filled a confirmation will appear on a page and emails will be sent to a recepient we set in point 6.9 and a customer will receive a copy. Also order record will appear in Admin -> FW Food Menu -> Orders section.

Please contact us, if you have questions or need any assistance via Client Section. We would be glad to hear your feedback if setup process is easy enough. We plan to release a video soon on how to do it all and add to this post. Stay tuned.