How to Create a Woocommerce Food Ordering Website?

In this tutorial I’m going to show you how to create a Woocommerce food ordering website from scratch. I’m gonna do it with the help of the Blocksy theme and two additional plugins. So, if you’re interested then jump in.

First, please take at the video here below because then it will be much easier to understand what is what and how to accomplish that.

Video: How to Create a Woocommerce Food Ordering Website in 39 minutes?

Step 1: Install Blocksy Pro theme

If you would like to to create a similar Woocommerce food ordering website as me then you should use Blocksy Pro theme which allows us to add these element needed for the task:

Woocommerce Quick View without the need to visit single product page

This makes food ordering much easier and removes the hassle to go between category and single product pages.

Powerful header builder

This allows us to create all sorts of header layouts, add live search and social icons etc

Side cart

We can add a cart icon in the header with the option to open up not as a dropdown but as a side cart.

Customize every aspect of the site

Blocksy theme hasa ton of customization options which means that with the help of the couple of clicks you can change redesign your whole website.

Starter site needed for this Woocommerce food ordering website

Blocksy has a bunch of nice starter sites in their repository and we’re going to use one of them. Which means tha the end result will look something like this the on in the screenshot below.

Now, if you want to get a nice discount then grab it with the nice discount

SAVE 10% COUPON: WPSH10

How to Create a Woocommerce Food Ordering Website?

Step 2: Install and configure a starter site called Tasty

If you succesfully installed and activated both Blocksy theme and Blocksy Pro companion plugin then go to Blocksy >> Starter sites and import a site called Tasty. You can decide wheter to import only theme options with or without content. Also, don’t forget to activate a Blocksy Pro addon called Woocommerce Extras. It’s under Blocksy >> Extensions >> Pro.

Next, go to Appearance >> Customizer and configure the theme to you liking (change logo, colors etc).

Step 3: Install and configure Woocommerce

We’re going to need Woocommerce for selling your food. So, if you’re not familiar with the Woocommerce then see the video mentioned above. In this I’m showing how to set it up.

If you need in depth Woocommerce tutorials then see the official docs here.

Also, don’t foget to got to Appearance >> Customize >> Header and add a Cart element to the header.

Step 4: Add products

Forst, add product categories (Appetizers, Main course, Desserts etc) and the add products to these categories. You can add both simple and variable products.

If you’re not familiar with the Woocommerce then see the video mentioned above because in it I’ll show you how to do that.

Step 5: Activate Quick view

Go to Appearance >> Customize >> Woocommerce >> Product archives >> Card options.

Now find and activate Quick view and set the trigger modal on “Card click”. This makes all the product cards clickable which means that quick view opens up even when clicking on the title, price, image etc. elements.

There is one issue though. Since later we’re going to add extra product options then we’re going to disable this add to cart button on the cards.

Step 6: Disable and rename add to cart button on shop and product loop

In order to accomplis that grab these two code snipepts here below and add them to the child theme’s functions.php file or better yet – use Code Snippets plugin for it.

Remove Add to cart from shop pages

add_action( 'woocommerce_before_main_content', 'disable_add_to_cart' );
 
function disable_add_to_cart() {
if ( is_shop() ) {
add_filter( 'woocommerce_is_purchasable', '__return_false');
} 
elseif ( is_product_category() ) {
add_filter( 'woocommerce_is_purchasable', '__return_false');
} 
}

This previous snippet will replace add to cart adding feature with Read more button. Now, I would like to replace this “Read more” with “Add to cart” and since we have a quick view activated the clicking on this will trigger quick view page itself.

add_filter('gettext', 'translate_strings');
add_filter('ngettext', 'translate_strings');
function translate_strings($translated) {
$translated = str_ireplace('Read more', 'Add to cart', $translated);
return $translated;
}

Version 2: Disable add to cart button

Some users have reported that for the newer Blocksy theme versions this version here above is not working because it will replace “add to cart” button with “read more” button but clicking on the button will open single product page.

Well, if this is the case, then don’t use the version above and use this one here instead. Another benefit of doing this is that you can skip step 7.

if (!function_exists('woocommerce_template_loop_add_to_cart')) {
	function woocommerce_template_loop_add_to_cart() {
		global $product;
		wc_get_template('loop/add-to-cart.php');
	}
}

Step 7: Add extra Woocommerce product options

Since most of my food sold in the shop have extra options (more cheese, gluten free sausage, extra large pizza etc.) I need to install a free plugin called “Extra Product Options for WooCommerce”

Now go to the Products >> Extra products and add new field listing. Configure it accoringly and then add product add-on fields.

Extra Product Options for WooCommerce

Step 8: Remove “Go to product page” button from Quick view

This is optional but if you would like to remove “Go to product page” button from the wuick view page then add this piece of CSS to the Customizer >> Additonal CSS.

.ct-quick-view-card .ct-quick-more {
    display: none;
}

Step 9: Add Delivery and pickup time and date selection yo your Woocommerce shop

If there is a Woocommerde food ordering website then there shoulb be an option to choose either delivery date or time. Or better yet – there shoul be an option to choose also a pickuy date and time. So, let’s add this feature to the site.

You need to install and configure a plugin called “Order date, Order pickup, Order date time, Pickup Location, delivery date for WooCommerce

If you need help with the plugin then take a look at the video above and see it (starting 33min 24sec) where I’ll show you how to do that.

Now, if everything is correctly set up then you should see something like this on the checkout page.

How to Create a Woocommerce Food Ordering Website?

Step 10: Add a product filter

Go to Appearance >> Customizer >> Woocommerce >> Product archives and activate Off canvas product filter. Customize it if needed.

Now go to Appearance >> Widgets and add a Product categories widget inside Woocommerce Off-cancas filter widget area. Also, if you need a better product fitlter then you can create one with some 3rd party plugin and add it over there.

Step 11: Testing a Woocommerce Food Ordering Website?

Well, basically everything has been done now and there is nothing left but testing it. If you have followed this tutorial to the letter then it should work like a clock and you can open up you Woocommerce food ordering website without any issues.

Useful Woocommerce and Blocksy theme related tips

Here are some of my favorite Wordpress tools

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: For getting started, I really like A2 Hosting. They have the dedicated and fast Wordpress hostinh and support has also been fast and responsive. If you’re more tech savvy and want to have a really fast managed cloud hosting then I recommend Cloudways. (Btw, this site is hosted in Cloudways.)

To see all my of most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Choose amount

Best selling plugins

Default image
Janek T.
I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce. If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here Follow me in Twitter here
Articles: 72