How to Create a Woocommerce Food Ordering Website in 39 minutes?
Vložit
- čas přidán 1. 06. 2024
- In this video I’m going to show you how to create a Woocommerce food ordering website with delivery and pickup time/date option.
🅱️ Blocksy PRO theme wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
All the snippets shown in the video are here: wpsimplehacks.com/woocommerce...
All mentioned Blocksy related videos can be found here • Blocksy Theme Tutorials
✅ If you want to be the first to be notified about the new tutorials, then please subscribe to this channel. / @wpsimplehacks
✅ BEST WORDPRESS THEMES:
Blocksy theme: wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
Kadence Theme: wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
Astra Theme: wpsimplehacks.com/astra
GeneratePress: wpsimplehacks.com/generatepress
OceanWP: wpsimplehacks.com/oceanwp (SAVE 10% Coupon WPSH10)
✅ MY FAVOURITE WEBHOSTING PROVIDERS:
Verpex Hosting wpsimplehacks.com/verpex
A2 hosting wpsimplehacks.com/a2-hosting
Cloudways wpsimplehacks.com/cloudways
✅ AWESOME WORDPRESS PLUGINS:
WPCodeBox wpsimplehacks.com/wpcodebox (SAVE 20% Coupon WPSH20)
WooLentor Elementor/Gutenberg add-on wpsimplehacks.com/woolentor (SAVE 20% Coupon WPSH20)
Best Wordpress Backup, Migration and Staging plugin - WpVivid Pro wpsimplehacks.com/wpvidid (SAVE 20% Coupon WPSH20)
Best Gutenberg Blocks addon - Kadence Blocks wpsimplehacks.com/kadenceblocks (SAVE 10% Coupon SIMPLEHACKS)
Best forms plugin - Fluent Forms: wpsimplehacks.com/fluentforms (SAVE 20% Coupon: WPSH20)
WP Social Ninja wpsimplehacks.com/socialninja (SAVE 20% Coupon: WPSH20)
Best for email marketing - Fluent CRM: wpsimplehacks.com/fluentcrm (SAVE 20% Coupon: WPSH20)
Best for creating tables - Ninja Tables wpsimplehacks.com/ninjatables (SAVE 20% Coupon: WPSH20)
Best events calendar and ticket selling plugin - WP Eventin wpsimplehacks.com/wp-eventin (SAVE 20% Coupon: WPSH20)
Best Wordpress LMS - Tutor LMS wpsimplehacks.com/tutorlms (SAVE 20% Coupon thmwelcome20)
Best Wordpress SEO plugin - SEOPress wpsimplehacks.com/seopress
✅ AWESOME WOOOCOMMERCE EXTENSIONS:
Best Woocommerce Swiss Knife tool - Kadence WooExtras wpsimplehacks.com/wooextras (SAVE 10% Coupon SIMPLEHACKS)
Best Woocommerce sidecart plugin - Woocommerce Cart in One wpsimplehacks.com/cartinone
TIMESTAMPS
00:00 Overview
01:08 Install Blocksy Pro Theme
02:54 Install starter site
04:26 Header customizations
07:37 Install Woocommerce
09:39 Woocommerce shipping mehtods
11:25 Woocommerce taxes
12:00 Woocommerce Payments
12:38 Add food categories
13:30 Add products
17:06 Add menu page to navigation
18:34 Shop customization
19:50 Add Quick view
21:03 Add to cart fix
22:30 Theme customizations
25:02 Add product extra options
27:43 Add ajax add to cart
28:14 Add cart icon to header
30:10 Additional product options
31:19 Remove "Go to product page" button
31:55 Product sorting and display options
33:24 Set up delivery and pickup date/time
39:15 Final testing
40:10 Add product filters
41:01 Customize Trending block
42:04 Total cost of the Food Ordering Website
42:33 Customize front page - Jak na to + styl
![How to Make a Food Delivery Website in WordPress [Step-by-Step Tutorial]](http://i.ytimg.com/vi/sdOmmaDDsGg/mqdefault.jpg)
This video is so helpful. I had been looking for a way to add extras on products being able to add prices as well. Every other plugin is very expensive and can't even develop my test pages without having to pay. Thank you for sharing this tips and making the entire site. You're the Best!
Thank you for your kind words 😊
This is a priceless tutorial. Thanks a lot for your generosity, so helpful.
You're welcome
This video was very helpful. You made it so simple in less than an hour. Thank you
Glad you liked it 🙂
I echo the other comments and thank you for taking the time to record such a useful and clear tutorial.
Thank you for your kind words ☺️
thank you for showing me this!
You're welcome 🙂
Thank you for the great tut
You're welcome 😊
Such a brave move to choose the lesser active install plugin .
If you didn't make this video, I will never know it exist .
Thank you
Glad you liked it ☺️
Thank you for your help
You're welcome
Hi!! This is great!! Thank you for this video!!
Just a small question. At 27:30. . The width of table is also changed when you click the extra options. Click two options and the width change twice. Can we do something that make the table width not changed?
And again. Thank for your work!!
Probably this has something to do with the plugin itself, and it would be wise to ask the plugin support whether it can be fixed. Also, maybe it is already fixed because the video is already 4 month old.
Hi Janek! Very useful video. Can I use Kadence Blocks instead of stackable?
Of course. ☺️ I don't use Stackable in my videos
Hi, Thank you for the video. A question: Is there any possibility to prohibit (fade and lock i.e.) the user to click the "Add To Cart" button until a *Required text field is filled?
Not that I know of
Love your videos, how about creating a tutorial video about WooCommerce Marketplace? Image a local restaurant marketplace, for example.
Unfortunately I'm no especially familiar with Marketplace related sites and therefore I'm not the best man to create these tutorials 😊
Hi, how would you go about creating an order confirmation application for iOS devices. Let's picture that the user sends the order and you have an small application that shows your pending orders where you can set the pickup time, confirm or deny orders and print the order to be prepared by the chef. Thanks in advance!
Sorry, but I don't know suc an app. Woocommerce native iOS app let's you to handle orders but not in a way you described it.
HI, This is great i have one question, how can we enable to our client to login or register on our website so that next time when they login they don´t need do rewrite thier address
1) Log in >> Settings >> General >> Select "Anyone can register"
2) Now go to Woocommerce >> Settings >> Accounts and privacy and configure it accordingly
3) Be sure that you have a My Account page set up. This page is usually created automatically during Woocommerce setup. See it under Pages >> All page. My account docs are here woocommerce.com/document/the-my-account-page/
4) If needed, add My account page in desired menu
Thank you sir
🙂
If you know any other useful plugins for restaurants (POS, Order printing etc.) then let me know in the comments.
It's a Checkmate has a Woocommerce POS integration. It integrates with over 30 different POS's
nice sir!
Thanks 😊
Hey! It seems that the add to cart tweak at 22:00 does not work anymore - I have implemented the snipped and it redirects me to the single product page. Any idea why?
Thanks a lot for the video, was very helpful in many other aspects
See whether this helps you out wpsimplehacks.com/woocommerce-food-ordering-website/#version-2-disable-add-to-cart-button
@@wpsimplehacks thanks a lot, it did the trick!
full Awesome
Thanks
Hello again, I am following through the video as I create the same website. My Quick view for each item (in the card view) doesn't have a close button (the X button at the top right) What can I do to have the close button?
Also, when I add the "Ajax Add to cart" behaviour for the card options, the "Add to cart" button still re-directs me to the product page (but adds the item in cart in the process). According to your video, it should add the item to the card, but show an additional button "View Cart". How can I achieve this? Is there something I need to do to tweak it?
Do you use Blocksy Pro theme and the Quick view from Blocksy does not have the close button? If so then probably you’ll get the fastest solution from the Blocksy support here creativethemes.com/blocksy/support/
@@wpsimplehacks Thanks for the response, and yes am using blocksy pro. I'll submit a ticket see if it can help. Also,, when I add the "Ajax Add to cart" behaviour for the card options, the "Add to cart" button still re-directs me to the product page (but adds the item in cart in the process). According to your video, it should add the item to the card, but show an additional button "View Cart". How can I achieve this? Is there something I need to do to tweak it?
The link to my sample website is here: www.tique.link/sj
I just tested on with the latest Blocksy Pro on my other site and everything works as in my video.
That is:
1) Add quick view "card click" option
2) Acitvate Ajax add to cart for single products. It is under Customizer >> Woocommerce >> Single products
3) If this is done then after clicking on Add to cart button on Quick vie new View cart button is visible.
So, if there’s something going on on your end then add this question to your support ticket and Blocksy team will figure it out for sure.
@@wpsimplehacks thanks a lot please. I’ll take a closer look and see. I appreciate the help.
@@wpsimplehacks Hello again, I managed to sort it out with the latest version of Blocksy Pro. Thanks so much for pointing me to the right direction. Cheers 🥂
very good can we make bar search by address and location thank you so much
Look for a Woocommerce address autocomplete plugin. There a free and paid you can try out. You need to have a Google Maps API key though.
Hello sir.. I've installed the plug in but when i start to import the starter site it stucks at 42%(import)?how long should i wait or is there any remedy to this?
It would be wise to send this question directly to theme support team here creativethemes.com/blocksy/support/
the code snippet for Step 6: Disable and rename add to cart button on the shop and product loop is no longer working it's still opening the single product page when clicked an fix
Thank you for reporting it. See whether this helps you out wpsimplehacks.com/woocommerce-food-ordering-website/#version-2-disable-add-to-cart-button
Can this be done with any other theme ?
Not in a way that is shown in this video
how i can manage my dishes thorough mobile if i want to set out of stock
Log in to your site, open up a product and edit stock status.
@@wpsimplehacks but i want to update through mobile any idea or any application to update my stock through mobile
Woocommerce has Android and iOS app. See here woocommerce.com/mobile/
I haven’t used them but you can try it out and see whether it works.
@@wpsimplehacks will try it if it's not working i will contact you later
No need to contact because I am not the one who provides support for third party plugins. That is, it is Woocommerce related question and you should contact directly with the Woo support.
sir can i get that project ? i think its food ordering
What do you mean by that? :)
Is it possible to make this type of website with free version?
Yes, but you would need some kind of Quick view plugin and on the archive/category pages you would need to deactivate title and image links to the products. This needs a bit coding.
@@wpsimplehacks
I m waiting for such codes. If you have time in the future pls do some tutorials about it.
CAn i delet the adress for pick up orders?
See here wpsimplehacks.com/how-to-hide-woocommerce-shipping-methods-conditionally/#how-to-hide-woocommerce-checkout-fields-when-local-pickup-is-selected
Why don't you guys include responsive/mobile views in your videos? Isn't it the primary platform for all users?
The purpose of the video is show you the direction. If I would show every detail of the theme customation the video would be so long that noone would watch it. Also, it’s fairly easy to tweak Blocksy theme for mobile.
好视频,中国区来客,谢谢这个教程.
不要客氣
please,
how to make a certain day pizza day with a fixed price?
Sorry, can't help you with that
I think you have a video about this Woocommerce Pricing Rules & Dynamic Pricing plugin
is this correct?
@@wpsimplehacks
screen recorder
What? :)