All the required codes & functionalities for food-delivery websites on WordPress

Thinking about creating a website for your restaurant? Nice. Thinking about delivering your tasty food to your fellow countrymen? Even nicer. Here are all the required codes & functionalities for food-delivery websites on WordPress.

Functionalities:

1. Required plugins & the setups
2. Delivery & take away options
3. Deliver in one city
4. Minimum order amount
5. Special offers & combo menus
6. Product addons

Here’s an article on the differences between food-delivery & other ecommerce websites

If you want to improve your restaurants SEO rankings, then here’s an ebook, man, your competitors will be jealous.

Full list of the required plugins & setups

Code Snippets – Used for adding the custom codes, so we don’t lose them with each theme update.

YITH WooCommerce Product Add-Ons – Used for adding product addons (extra cheese, sources, etc…).

I highly you get a premium access to YITH plugins, they’re super useful and user-friendly.

Add delivery & take away options for your visitors

You want to offer your visitors the option of take away, and when they choose take away, they shouldn’t fill in their address and other information 😉 Why would you ask for an address if they’re picking it up?

Add two HTML sections in your checkout page, one before the

and one after.

Before

:

<h3 style="font-size: 1.2rem;"><strong>Choose a shipping method</strong></h3>

<select id="shiptype" onchange="changeshiptype()">
    <option value="shipping">Delivery</option>
        <option value="take">Take Away</option>
</select>

After

<script>
  function changeshiptype () {
     let value = document.getElementById("shiptype").value;
     if(value == "take") {
         let adress = document.getElementById("billing_city_field").style = "display:none";
         
         document.getElementById("billing_address_1").value="take away"
         
       document.getElementById("billing_address_1_field").style = "display: none"
       
       
       document.getElementById("billing_postcode").value = "12000"
       document.getElementById("billing_postcode_field").style = "display:none"
       
    } else {
        
        
        
         let adress = document.getElementById("billing_city_field").style = "display:block";
         
         document.getElementById("billing_address_1").value=""
         
       document.getElementById("billing_address_1_field").style = "display: block"
       
       
       document.getElementById("billing_postcode").value = ""
       document.getElementById("billing_postcode_field").style = "display:block"
        
        
    }
  }
</script>

Deliver in one city in WooCommerce

Obviously you don’t ship your burgers to the other side of the world right? Right. Here’s the code for having only one city in WooCommerce’s checkout page.

From your WordPress dashboard go to Snippets (you have to install the Code Snippets plugin) -> Add New -> Paste the following code -> Change the city (Prague) to your city

/* one city*/

// Only one city at checkout
add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields', 10, 1 );
function custom_checkout_fields( $fields ) {
    $fields['billing']['billing_city']['type'] = 'select';
	$fields['billing']['billing_city']['options'] = array('Prague' => 'Prague');
    $fields['shipping']['shipping_city']['type'] = 'select';
    $fields['shipping']['shipping_city']['options'] = array('Prague' => 'Prague');

    return $fields;
}

Add a minimum order amount in WooCommerce

You don’t want to spend 5$ on delivering a 2$ worth of shopping, right? Right.

From your WordPress dashboard go to Snippets (you have to install the Code Snippets plugin) -> Add New -> Paste the following code -> Change the 30 with your website’s minimum order amount.

Change the #minimum – 30;

/* Set a minimum order amount for checkout
 */
add_action( 'woocommerce_checkout_process', 'wc_minimum_order_amount' );
add_action( 'woocommerce_before_cart' , 'wc_minimum_order_amount' );
 
function wc_minimum_order_amount() {
    // Set this variable to specify a minimum order value
    $minimum = 30;

    if ( WC()->cart->total < $minimum ) {

        if( is_cart() ) {

            wc_print_notice( 
                sprintf( 'Your current order total is %s — you must have an order with a minimum of %s to place your order ' , 
                    wc_price( WC()->cart->total ), 
                    wc_price( $minimum )
                ), 'error' 
            );

        } else {

            wc_add_notice( 
                sprintf( 'Your current order total is %s — you must have an order with a minimum of %s to place your order' , 
                    wc_price( WC()->cart->total ), 
                    wc_price( $minimum )
                ), 'error' 
            );

        }
    }
}

Create special offers & combo menus

To create combo menus and special offers you need to install & activate YITH WooCommerce Product Add-Ons.

Here are the required steps:

1. Create a product with the combo name i.e. Buy 1 burger and get french fries for free
2. Make the price 0
3. Add the image and description

From your WordPress dashboard go to Products -> Add-ons -> Add New

1. Name the Add-on group.
2. Choose which products it should be applied on. Or you can choose the categories.

3. Save group.
4. Manage Add-ons>> – If you can’t find it, then go back to the Add-ons and click on the edit.
5. New Add-on -> Radio Button -> Title: Choose your burger.
6. Click on the “Add new option”.
7. List all the burgers the user can choose from with their prices.

8. Click on “New Add-on” one more time -> Radio Button -> Title: Fries
9. Option label: Free -> Check the Checked checkbox

10. Save

This is how it will look like:

Add product add-ons in WooCommerce

This is rather simple, the same way we added special offers. First, install YITH WooCommerce Product Add-Ons

1. Create the product add its price
2. Go to Products -> Add-ons
3. Add New -> Choose the product/category
4. Manage Add-ons
5. Start adding the add-ons accordingly