How To Add An Online Ordering System For Restaurants & Local Retail To WordPress Websites

every local business can explode their revenue and get their customers to rave about them by adding convenient local ordering to their website and in this video i'm going to show you how easy it is to add local ordering to any wordpress website in five simple steps [Music] let me give you a quick rundown of everything we're going to accomplish in this video we're going to start from a blank template with this beautiful restaurant template next i'm going to show you how to add a product in something called product options and we're going to build this beautiful product grid out you can see i have the layout where we can toggle between product categories here's the product that i make and when you click on select we get this slide out cart and we have revenue boosting product add-ons that you can see right here you can super size me there's a lot that you can do with this product add-on feature that you see here to allow your buyers to customize the order check this out when you add the product to the cart you can have additional cart upsell offers that you see right here oh this looks good let me add that to the cart this slide out cart looks phenomenal on mobile devices it looks like a native app and your shoppers can customize their order by increasing the product quantities or remove products right here from the cart now here's the best part when i click on checkout take a look at this beautiful customized checkout for local ordering the customers can choose their pickup date as soon as possible or a date in time in the future oops it's almost at the end of the day today or like this and these are time slots so you can control the flow of orders that come in we've got a recap of what they're ordering the coupon code check this out we have a revenue boosting tipping feature here on the checkout so if you want to be able to accept tips just like you would when someone orders inside of your restaurant you could do that right here on the checkout and this is going to be fully customizable these amounts and it's very very flexible and there's a very powerful feature in here called timed products so you can set it so certain products will only be orderable viewable displayable in certain time ranges so this is how you would show a lunch special during lunch hours and then remove it when it's dinner time you can set as many of these timed product rules up there's lots of different options on how you display them so right now i'm asking you to hit the thumbs up button buckle up let's get started now the first step is going to be to set up our website so right here i have a fresh brand new wordpress install there's nothing installed on it so what we're going to do is install a template that is suitable for a restaurant then we're going to install this plugin called orderable which is going to add all these local ordering features to your website now orderable has a free version and a pro version and it clearly lists out right here what you get in the free version and what you get in the pro version for this video i'm going to use the pro version because i want to show you the product add-ons the order bumps some of the power features like the time slots as well as the custom checkout and checkout tipping so i'm gonna be using the pro version now we're fortunate that there are a ton of templates related to restaurants that we can easily install on our website with a few clicks right now i'm looking at the astra starter templates and this is with the astra theme and you can see right here there is a variety of restaurant related templates available here to install so there's free ones and there's ones you have to pay for here's a free one right here looks quite nice also there are starter templates with the cadence theme and here i have a list of cadence starter templates and there's a couple in here specifically made for restaurants here's one for a burger joint and here's one for an italian restaurant so i'm probably going to use this one right here so let's head on over to that fresh website and get going okay getting this set up is easy i'll go into the dashboard i'll click on appearance and then themes i'll click on add new and i'm going to choose the cadence theme right here you could search for it or just look in the list i'll click on install and now i'll click on activate it will immediately prompt me to install the cadence starter template so i'll click right here to do that it takes me right here to choose a page builder i'm going to use gutenberg but you could use elementor so click right here and then here are those starter templates and i was going to go with the burger joint so i'll click right here to choose that you can customize the colors if you want and you can customize the fonts if you want but i'm just going to go ahead and click on full site and for here you can enter your email address or click right here it says skip and start importing so i'll do this and i'll have a full website in just a few moments all right it is done so let's just quickly take a look at the front end of the website i click on finish and you can see i have the website here so now let's go ahead and install and set up orderable so i'll click right here to go into the dashboard and i'm going to click where it says plugins and choose right here which says add new and then i'll click right here where it says upload plugin and i have already downloaded the pro version of orderable here it is i've dragged and dropped it here i'll click on install now then i'll click here where it says activate plugin and it immediately takes me to this onboarding step-by-step process i'm going to go through it in this video and i'd recommend that you do this as well so let's click on begin and the first set of info to put in is your business address now this is a very important step i've already gone ahead and filled it out for me and that's because this is going to add pickup and delivery options to the website so you really have to have the right address in there so the any kind of delivery charges can be calculated or things like that so i've already popped that in i'll click on continue and here i need to put in some information uh related to when i want pickups to be available when i want deliveries to be available what days of the week were open and all of that so i'll go ahead and fill this out so i want to offer delivery and pick up i'll be open seven days a week from the hours of 9 00 am to 7 pm i'll go ahead and click on continue and then click on save and finish now here i am at the dashboard for orderable i'm going to copy and paste my license key in so that i can activate those pro features and use it for this setup awesome now that it's activated we've finished step one which is setting everything up as well as installing orderable now in step two we're going to set up our products and the product add-ons these are the options that are available when someone has chosen to purchase a product to customize it so a simple way of thinking about this in the sense of food is customizing what's on it and there might be choices to be made for example a pizza what toppings do you want on it stuff like that so it's really simple all we have to do is go to right here where it says products and click on add new now let me just explain what we're looking at and then i'm going to go ahead and fill it out so for the product name this would be the name of the item you could put a description right here if you wanted in this big open space off to the right you see where it says product categories you're going to benefit from categorizing your products so when we're putting together the different product grids they can be separated optionally by categories so you can click right here it says add a new category you can choose a category so i can just choose the pizza category right here you'll want to take advantage of these product category options then as we scroll down a bit right here we can put the price of the item and then as i scroll down right here it says product short description this will be used when you're viewing the layout of the products so we're going to show the picture if you want the name of the product the price and a short description this is where you want to describe what the person's actually ordering and then over here to the right it says product images and you'll want to choose an image which will show in that product grid if you want to use the images in that so i'll go ahead and fill this out right now great so let's take a look at this i've named my new product the wp crafter special i set the price at 14.99 here's my short description just saying it's a special lunch offer that includes pizza and a drink i chose a picture oops as you can see right there and i put it in this category right here that says pizza i'll go ahead and click on publish and now i've created my first product so you'll want to go through this and create all the products that you want to offer next let's create some add-ons and additional options for this and those could be for an additional cost or just to customize the order and that's really easy we're going to go to where it says orderable and there's this option here this is product add-ons and we'll choose that next we'll want to click right here where it says add new and we'll go ahead and give this a title so i've named it lunch specials because i might want to have the same offers or the same product add-ons available for multiple lunch specials so right here it says fields i'm going to go ahead and click on add my first field now a field is going to be one of those options that i make available so to customize this i'll click on it and expand some options the first one is the type of field here and this could be text a drop down a check box so that would be if you want to make multiple options selectable and then there's a radio option this is when you want to make it so they can only choose one of the options then we can name this field we can give it a description if we choose we can choose to make it required multi-line we can have some placeholder text and we can also have a default value but some of these options change based upon the type so those are related to the text type and then when i go right here to drop down you can see they change a little bit so i'm going to go ahead and have a check box right here actually i'm going to do something different i'm going to choose a radio and for the title i'm going to name it super size this is something you see mcdonald's do a lot or different fast foods where you get a bundle or you get a meal special and you can pay a little bit extra to super size it more fries more drink or something like that so i will make choosing this a required option and so now i'm going to add my options for it and so the first one i'm going to call normal and i want this pre-selected and i'm going to add a second option which is the super size and for this i'm going to make it cost 59 extra or something along low signs that's fine so these this option will be available to the person that adds this product to their their cart so i'll scroll up and i'll click on publish and so i have this product add-on and you can add multiple fields if there's multiple customizations if you wanted to give the buyer the option to choose some or enter in some special instructions that's where you would use that text field option all right now we need to just say what products are these options available on some click right here it says add your first rule and i only want to apply this right now to that product i created just a moment ago so product is equal to and it was the wp crafter special just like that all right and then i'll click on update so now when someone adds that product to the cart it's gonna give them these options and we'll get to test this in a moment in step three but that completes step two where now you know how to add products and you can create flexible product add-ons that you assign to products or entire categories the next step is to add clickable product grids and this is very easy to create so first we need to create them inside of orderable and then we're going to create a page and we'll call it order online and we'll have it display the products in these product grids right so i'll go ahead and choose right here where it says layout builder and i'll click right here where it says add new and so we'll go ahead and give it a name and then there's some layout settings so you can have this layout just show a particular category of products or all your products you can show it in a list or a grid and you can also have it separated out and put in category titles it's really flexible what you're able to do as well as show images and clickable card makes it so when the entire card is clicked you can see it right here anywhere on the card is clicked not just when someone clicks on the add button it gets added to the cart so i'll go ahead and fill this out so here's how i set mine up i just named it order layout i'm only going to have one i chose my categories it's a grid for the sections i have these top tabs tabs here to make it filterable so that will make it so each product category will have its own tab it's going to be easier for the person on my website i'm displaying the images as you can see and i'm making the entire card clickable i'll go ahead and click on publish to publish that now when i click back onto layout builder we have this shortcode here that we can use to place this anywhere you want on your website now if you're using the wordpress blog builder there's also a block that we can drag and drop in which i'll be using and there's also one for elementor and i think maybe a few other page builders so next we need to create that new page i'll go to pages i'll click on add new and i'll name this page order online great and next thing i would need to do is add the orderable block so i'll click on the plus here and i'll start typing orderable there it is product layout i'll click on it and it has been added it's what's being added there it is so i'm going to click on the block and over on the right it says layout and this will show a list of the layouts i've created so you can get really creative and have lots of different ways of having your layouts you can see here it is i'll click on publish publish and then let's go ahead and view the page so obviously i need to do a little bit more styling on the page i would probably uh push this down maybe give it a little bit of spacing uh here but that's okay i just want to continue with the tutorial so now when i click on right here where it says pizzas and when i scroll down we're going to see that pizza i or that product i created called the wp crafter special here's the description of it and when i click on select actually i don't have to click right there let me go back let me click anywhere on the card you can see when i hover over a card it shows that it's highlighted so i'll click on it there it is and so here's the normal option and here's the super sized option and then i can click on add and you can see there it is so 14.99 plus that dollar 59 up charge and this is how you create these flexible product layout grids and there's a lot of flexibility to it and you have a lot of control over how it all works including the styling so let me just show you some of the styling really quick i'm back in the orderable settings and i'll click right here where it says style and so we can change it to match our brand color our button style we can change from rounded to square as well as here we can control the font size for each of the products for the title and the price and all those settings are going to be right here while we're at it that slide out cart you can control where the icon is and you can make it a little bit higher a little bit lower depending on what else you have appearing on your website and now you're complete with step three so now we're gonna move on to step four and we are going to configure order flow rules and what this means is you can control when orders can come in how many orders can come in at a time so you don't find yourself overwhelmed with orders and that happens it's happened to me so i'll go ahead where it says orderable and i'll click on this to show our settings and then i'm going to go right here where it says store settings and here is the info we put in when we set everything up what i want to do is i want to set up service hours and this would be the hours i'm accepting delivery options as well as pickup options now what is crucial because this is based upon the time of day is right here where it says time zone so right here you have to make sure your website is set to the right time zone for where the business is located so this right here is not the current date and time where you are you need to adjust the setting and this is not right for me so i'll click right here it says update time zone it opens up in a new tab and then right here where it says time zone i can click on the drop down and start typing in either the utc or the city or the major city you live near that has the time zone so for me that would be los angeles so i'm going to start typing it in los angeles and uh here it is i'll click on it and i know that's going to be the right time for me and then i can click on save changes and so uh i can now go back to the tab with orderable i'm going to do a quick refresh and you're going to see it shows it correctly now it shows los angeles time zone so that's very important whenever you're doing anything based on time so now where it says service hours i'll set it the same for delivery and pick up so for the days i'm providing this service i'll do it every single day like this okay and then for the period you can have it set to all day but you get a lot of control when you choose time slots so what this means is when someone comes to place their order they're going to choose the time slot that they want to pick it up and you're going to have great control over this so say i only provide delivery let's just say from 12 p.m to yeah 12 p.m to 8 p.m so you notice this doesn't have to mirror your business's open hours right here it can be set to what you want it to be set for when you're providing those options and you can set multiple service hours if you're closed for lunch for these services so for frequency i'm going to say every 20 minutes we have time slots available there's a 10 minute cut off time to be able to choose that next time slot and i can only handle five orders per time slot so this means that as the orders come in if at say 12 40 p.m if five people have already taken up that time slot another order will not be coming in it won't be available that time slot so you just don't get overwhelmed as a business and this is really cool as soon as possible so someone's on your website placing their order you can offer this asap option and what that will do is just automatically choose the next available time slot you can do pre-ordering if you want to let someone order today for tomorrow or something along those lines then we have holiday hours if you're going to be shut down during certain holiday hours and what's nice is you can make it reoccurring all right so we did delivery and then right here we have pickup i can have it be the same as delivery or i can uncheck this and set up specific rules just for pickup i'm gonna just roll with this i'll go ahead and click on save changes now where these are going to show is on the checkout step so let's go to the checkout page and let's take a look so you saw just a moment ago i set up a product layout i added a product to the cart when there's a product in the cart we get this icon here and so i can click on it and there is my cart i'll go ahead and click on checkout it's going to use the checkout style from your theme but i'm going to show you how to make this look way way better and you can see right here we have delivery date that we can choose and there's my as soon as possible we can choose a date and then we can choose a time slot you can see they're appearing in 20 minute increments and that's how you can control the flow of orders as they come in now for this last step we're going to make everything you see better we're going to make conversions better and the revenue better and there's a few things we're going to do for this first let's go ahead and update this checkout style for something suitable for local ordering so i'm going to go back into the orderable settings and i'll click right there i'm going to click right here where it says checkout settings and there's this option here to override the existing checkout and you we can show a logo so i'm going to do that and here's where i'll upload a logo but i'll go ahead and choose mine here's the logo that came with this template i don't know how good it's going to look as you can see there's some writing there in white you're probably not going to be able to see it but we'll just go ahead and go with it i'll click on use this image and then i'll click on save changes now here i am back on that checkout we just took a look at let me go ahead and click on the refresh and you can see it's totally changed to a dedicated and focused checkout page for local ordering and you can see the logo should would look nicer when you pop your logo in there but anyways you can see it's a lot more clean and clear i can pop my information in here it's optimized right here i can choose the local pickup and you can see the stuff that needs to be prominent is a lot more prominent right here and we can see what's being ordered we've got you can see that the coupon code has been moved down here and here's where your payment gateway stuff so you can see this looks a million times better but one thing it's missing is tipping options so let's add that so now i'm going to click right here where it says tip settings and i'm going to enable tipping and i'm going to fill this out so you can have as many tipping options as you want so they'll appear as buttons that will say whatever you want if you want it to be specific dollar amount or a percentage it's really simple so you give it a label you give an amount and fix would be a direct dollar amount or a percentage and then you click on add option and add as many options as you want so i'm going to go ahead and add three options and here they are 15 18 and 20 percent that's pretty commonly what i see pretty common uh and then we can choose a default option so it could be no tip uh if you wanted this will show as soon as i click on save actually here let me click on save so that we can see these options so let's make the default 15 so when someone gets to the checkout it's already chosen um and then right here we can have an option for no tip um and a custom tip so i'll put the custom tip in there as well and you can change those labels if you need this to be in a different language i'll click on save and now let's take a look at the checkout all right here i am and there's no tipping but let me do a refresh and there you have it there's my tippings and it's going to chew it's going to pull in that style color from the prior step as well as if it was to be rounded or square these buttons so you can see right here is the tip amount it's a set um by default to 15 percent but i can change it to whatever i want by just clipping clicking or i can do no tip right there and we're just taken back to that now the second thing we could do to increase revenue is to add a suggestion in the cart when a specific product is put in there it's super easy and let me show you how to do that let me demonstrate it so i'm gonna go to a product and so what i'm saying is when someone adds this product to the cart i want there to be this suggested complimentary product where it could be added by one click so let me show you how you do that let's go ahead and click on that product i created and i'm going to scroll down and you go here and click where it says linked product and where it says cross sales we're going to choose another product now i haven't added a dessert or anything like that which would be that other product that would probably pair well with this meal so let me just put something in here for the sake of this video i'll just choose pepperoni pizza even though it doesn't make a whole lot of sense now let me show you this in action here i am back on that order online page and let me choose pizza and then here's the product the wp crafter special i'll select it and i'll make my choice i'll do the super size i'll click on add and what do you see you see that cross sell right it's down here it's you may also like and it's showing me the image the product the price and i can click right here one click and it's automatically added and you can show multiple of these cross sells if there's multiple cross sales linked to products that people have in the cart this is a surefire way to increase the average order value of each order that comes into the local business now the last thing i want to show you is something really cool i intentionally made this product be a lunch special and what you do with lunch specials we probably don't want to show them when someone's ordering outside of lunch because it's not available anymore and orderable has that covered in a very clever way so i'm going to show you how to make certain products timed only available at certain times of the day all right so i'm going to go to where it says orderable click right here it says timed products i'll click on add new and i'll name this lunch specials there it is and we can choose a range where it's a visible or where it's hidden so for this i only wanted certain hours of the day so i'm going to choose visible and i'll click right here to set my time ranges in so it can be on a specific date or or there's different date ranges days of the week and all that but i'm going to choose time ranges because i want it uh available every day of the week but just during certain hours so i'll put those times in so we open at nine i think i said eight or nine let's just go with nine so i want it to be available at nine and stop being available at three so three would be fifteen hundred hours oops i did that wrong fifteen hundred right there and you can have multiple conditions available here and then i need to just choose my products so i'm gonna click right here it says add first rule now these rules are just like in the product add-ons so it can be based on a product or an entire category of products so for this i'd probably want to make a category called lunch specials and i toss in the products that i want visible in these hours but i'm just going to choose product is equal to and there's additional conditions here and enter wp crafters special like that and there it is i'll go ahead and click on publish so i have this set up right now so here i am back on my product grid you can see it's visible but i know i'm outside these hours and when i refresh the page and then let me go back here and choose pizzas again guess what you can't see it and that's because it's outside of the hours of this timed product and that's pretty much how you're going to set up online ordering on yours or your clients websites it's pretty simple five simple steps to get this going now you might be wondering about receipts and all that kind of stuff don't worry about that i have a video i created a few months back on how to get printing to those receipt printers it's really easy to set up and i'll link to that video in the video description box now if you would like me to create a full a to z video setting everything up from scratch i want to make that video how to make a restaurant website with online ordering if you want that i need you to click the thumbs up button on this video because that will be you telling me you want it and you'll watch it i don't want to make the video unless some unless people are going to watch it because a lot of effort goes into it so go ahead and give this video a thumbs up if that interests you and once again orderable uh there's a link in the video description to it it's a referral link if you click on that make a purchase they give me a tiny uh referral fee and it doesn't cost you anything additional that's how you can support the channel because this channel ain't making a whole lot with google ads that might be playing in the beginning of the video so go ahead and do that and support the channel i'd appreciate it you have any questions you can ask down below thanks for watching this video and i'll see you in the next one

Channel: WPCrafter.com WordPress For Non-Techies

Views: 4,940

Keywords:

Id: S3mw1_I18nM

Length: 31min 10sec (1870 seconds)

Published: Wed Nov 10 2021