WL_Food_Ordering_1280x720.mp4

00:00:00

In this tutorial, I'm going to be going over the food ordering widget

00:00:04

This can be used to place menu items and food directly onto website that will allow customers to purchase and then you can actually set up shipping or dinin and delivery in many other settings as well

00:00:19

And we're going to go over all that

00:00:21

As you can see, I've got a template that's already pre -made here with the food items

00:00:27

This here is a burger shop

00:00:28

We're just going to use this just for simplicity sake, but I'm going to show you how to create all of this

00:00:33

You can set your title here in your intro and these list items, these are all of your items are actually going to be listed out for the food ordering app

00:00:44

You would simply click add a new list item, they created a new one

00:00:49

And when you do that, let's just open up this burger so that you can see as an example

00:00:53

You have all of your different menu here

00:00:54

You can set your price

00:00:56

You would set right there and then the max quantity, how many they'd be able to add to the shopping cart

00:01:02

These here are the available and included options and toppings

00:01:06

These are going to show options that are selected as on and are default available

00:01:12

Whereas these options are not going to be on, they're going to have to choose whether or not they want to add them

00:01:18

If you want to add extra price to them, you'd simply follow the instructions here

00:01:21

You'd create this symbol, followed by a plus and a one and that's right above the enter

00:01:26

So if you hold shift and then the slash key right above the enter key, it'll create that symbol and you add a plus sign

00:01:33

You can do, let's say for example, plus 0 50

00:01:35

for cheese and then we'll leave the plus one for onions and when we save that and then click that, you'll see now here there's the quantity and the ketchup and mayo are automatically selected as on

00:01:51

because they are the available and then these ones are not included and you can see the extra price, the extra one dollar for onions, the extra 50 cents for cheese

00:02:00

You can add different options such as like size or color or flavor and then you would add the different, you know, small medium large or the different flavors, the different colors available for each item

00:02:19

You can add your main text and your title and all the information right here

00:02:26

The abstract is what's going to show right there whereas the main text is going to be what's actually inside

00:02:33

You can upload your pictures and videos right here and this is how it aligns to the text whether it's going to be above or below the text or on the desktop to the left or the

00:02:49

right and if you have multiple images you can set a slider and this will determine how often it slides between the images and you can add buttons as well and that's gone over in the buttons

00:03:06

tutorial

00:03:07

Now this SEO, Open Graph and URL, this is for like search engine optimization which is also gone over in a separate tutorial and this is for like Facebook and social media sites as well

00:03:20

Once you have all of your items set, all of your toppings and all of your pictures up and loaded and nature everything saved, you would simply go back to the main widget that can be accessed

00:03:37

either from the bottom button down here or the top button right here

00:03:42

You can simply click the food ordering widget and that will take you back to the main menu and then here you can add another item or you can set the different details and options

00:03:55

Down here is where you would set the delivery and the pickup and the different order types so you can hold down control and select which ones you want available and this will determine whether it even

00:04:09

asks the order type

00:04:11

You can determine a delivery cost, this will automatically add to the price and the minimum order for delivery so you're not wasting your time delivering just like a dollar's worth of food, you can have a

00:04:22

minimum

00:04:23

These are the different locations available, this is going to ask along with the order type it's going to ask for the different locations

00:04:33

You would simply separate them with the comma, you can ask for the time of order as well and then you can set your available hours and times and ask if you want to allow tips and

00:04:52

it will automatically calculate the percentage of that

00:04:56

This here, this is more for like organization

00:04:59

If you have multiple pages this helps because you can add a search form that will create a little search bar right up on top there, you can see that just automatically created a search bar and

00:05:14

down here if you have multiple pages you can choose how you want to organize that right over here as well as different tabs that will open up within each list item so you can have it

00:05:26

open up maybe with like a map or a calendar

00:05:29

RSS management is right here, this is for like maybe if you were to upload it or change your menu more often you can upload from an RSS

00:05:39

This list style and layout with this will do is this will determine kind of how it looks if you want on mobile it will determine the columns because mobile is a small screen you might only

00:05:51

want to do one column but if you want to do two columns for example it has now created these two next to each other and then that third one is down there by itself and you

00:06:02

can determine whether how it looks different on desktop or mobile which is really neat and then you can determine whether the image is above the text or how that's related on desktop and mobile separately which

00:06:19

is really neat and then as well as whether the image is shaped like a circle or whether it has round or square corners and then this is whether it opens in a modal what that is

00:06:29

is whether it pops open like you see here and then it allows you to close it or whether it opens up in a new page so if you were to save that this would open up

00:06:41

in a new page so once they click it it will now open up a new page and the user would have to click the back button to go back and then that will take them right

00:06:49

back to the main menu and show us an accordion is pretty this is just kind of a different look so we turn that on it it's going to organize it a little bit differently and show

00:07:05

a kind of there and you can have these collapsed or uncollapsed the additional styles let you require that whether you're logged in on mobile or desktop and then you can determine whether or not it's visible

00:07:24

only on mobile or desktop and for additional styles for the widget it's pretty much the same as all the others let you determine the space on the desktop how much space it takes as well as

00:07:36

a background and different animation styles so now you can see once we actually view the site and go to full screen we can click on a menu item and it'll pop open here these two are

00:07:55

included automatically and you can uncheck them if you don't want them and these two are these are not included and these two cost extra so if you want to add these it'll automatically add that $50

00:08:05

onto the price so when you add to the cart and you view your cart it's going to pop up with all the options that we set earlier the order type and these are the options we

00:08:14

set available so if you want to do delivery and these are the different locations so let's say if they were dining in you'd be able to select which location you want to go to and this

00:08:29

is the tips you see it automatically calculates percentages so if you want to add just 20 % it'll just add an extra $2 onto that and you can see it automatically added the $50 onto there

00:08:44

because this was only $10 and there's the tips if you had a delivery charge that would appear here as well and when you check out this would bring you to the checkout options now you see

00:08:56

this doesn't work that's because we don't have e -commerce set yet it's a very simple matter of switching on the e -commerce and I'm going to go over that in another tutorial