1. Documentation
  2. Plugins
  3. WooCommerce
  4. Extensions

Restaurant for WooCommerce Store Owner’s Guide – Basic Concepts

Installation ↑ Back to top

  • Download the zip file from your WooCommerce account;
  • Go to your WordPress Dashboard to Install;
  • Click “Upload Plugin” at the top;
  • Click on the “Choose File” button and select Restaurant-For-WooCommerce-Plugin.zip;
  • Click “Install Now” and Activate the extension;

Menu User Guide ↑ Back to top

Add a new menu ↑ Back to top

NOTE: Always configure the Menu before configuring RMS Menu Settings.

How-to-guide – add a new menu

  1. Once the plugin is activated, you’ll see the RMS Menu on the WP Admin Dashboard.
  2. RMS Menu click on theAll Menustab.
  3. Click on the “Add Menubutton.
  4. You can also add the menu by going to the Admin Dashboard → RMS MenuAdd Menu.
  5. Once a menu is created, the Admin will be redirected to the Menu configuration page.

Menu title ↑ Back to top

How-to-guide – add a menu title

  1. On the menu configuration page, you will see an input field for the menu title.
  2. Add the title of your Menu.

Menu view type ↑ Back to top

How-to-guide – change the menu view type

  1. On the Menu Type dropdown list, you will see two menu types:
    List View: Products are displayed in a list layout.
    Grid View: Products are displayed in a grid layout.

Menu Type – List View

Menu Type – Grid View

Toggle display ↑ Back to top

How-to-guide – Enable Toggle Display

  1. Enabling the Toggle Display allows users to interchange between list and grid view on the front-end. This option is disabled by default.
  2. Disabling this option will restrict users from toggling between grid and list view. The Menu type that would be displayed on the front-end would be the one that was configured in the Menu Type option.

Front-end Screenshots

Toggle Display – Enabled

Toggle Display – Disabled

Pagination (Items-per-page) ↑ Back to top

How-to-guide – configuring items-per-page option

  1. You will see an input field where you can enter a number for items you want to display on a single page

FRONT-END SCREENSHOT

Display categories ↑ Back to top

How-to-guide – Display Categories

  1. Search the categories in the input field
  2. A dropdown will allow you to select the categories you want to display in the menu. 
  3. The admin can also drag and drop selected categories to manage the sequence.
  4.  If the input field is empty, all categories will be displayed on the menu.

FRONT-END SCREENSHOT

Exclude products from the menu ↑ Back to top

How-to-guide – Exclude products from the menu

  1. Exclude products from the menu by entering the Product ID in the input field. 
  2. Enter Product ID separated by commas to exclude multiple products from the menu. 
  3. If the input field is empty, all products will be displayed on the menu.

How-to-guide – Finding the product ID

  1. Product ID can be found by navigating to the Admin Dashboard
  2. Go to ProductsAll Products.
  3. Hover on the respective item to view its Product ID.

FRONT-END SCREENSHOT

  • As you can see, we have added the Burger and Beverage category in the Display Categories option and have also entered the Product ID of both the items present in the Beverage category.

BEFORE

AFTER

Menu filter and filter position ↑ Back to top

How-to-guide – Configuring Menu Filter and Menu Filter Position

  1. Enable the Menu Filter option will display a menu category filter on your menu. This option would be disabled by default.
  2. Once the Menu Filter option is enabled, you can choose the position of the Menu Filter.
  3. There are two options on the Menu Filter Position dropdown menu: Top view & Left View.

FRONT-END SCREENSHOTS

TOP VIEW

LEFT VIEW

Show image in pop-up ↑ Back to top

How-to-guide – Show image in pop-up

  1. Enable this option will allow you to show the product’s image in a pop-up. This option would be disabled by default.

FRONT-END SCREENSHOTS

Option Enabled

  • When the user will visit the website and click on the ➕ sign to add the item.

  • The Image of that item would appear in a pop-up.

Option Disabled

  • When the user will visit the website and click on the ➕ sign to add the item.

  • The Image of that item would not appear in the pop-up.


Menu Shortcode ↑ Back to top

How-to-guide – Find the menu’s shortcode

  1. Every menu has its own unique shortcode which is visible on the right side of the menu configuration page in the Menu Shortcode section.
  2. It is also present in the All Menu page beside each menu.

How-to-guide – Display your menu using shortcode

  1. Go to Admin Dashboard → PageAdd New.
  2. A new page would open.
  3. Add the Title of the page.
  4. Click on the sign ➕ to add blocks.
  5. Select the Shortcode element.

  6. Now paste the shortcode of your menu.
  7. Click on the Publish button.

NOTE: When using Menu Shortcode, always set the Template of the Page to Full Width in the Page Attributes section.

FRONT-END SCREENSHOT


General Menu Settings ↑ Back to top

  1. Go to Admin Dashboard → RMS MenuSettings.

  2. Tabs would appear on the RMS Menu Settings page.

Restaurant Title ↑ Back to top

How-to-guide – Adding a restaurant title

  1. Add the title of your restaurant in the Restaurant Title input field.

Restaurant Description ↑ Back to top

How-to-guide – Adding the restaurant’s description

  1. Add the description of your restaurant in the Restaurant Description input field.

Restaurant Logo ↑ Back to top

How-to-guide – Adding the restaurant’s logo

  1. Add the logo of your restaurant by uploading an image.
  2. Click on the “Upload” button.
  3. Select the image from your media or browse to upload the image from your device.
  4. Click on the “Select” button.

FRONT-END SCREENSHOT

Convert shop page into a food menu ↑ Back to top

How-to-guide – Converting the shop page into a food menu

  1. Enabling this option will convert your shop into a restaurant. It will be disabled by default.

  2. This option will allow the Admin to choose the Shop Page’s Menu from a dropdown list.

FRONT-END SCREENSHOT

Minimum order total ↑ Back to top

How-to-guide – Setting up a minimum order total restrictions

This option will be able to set a Minimum Order Total, any order less than this total will be rejected at the cart.

  1. Enter a number in the minimum order total input field.
  2. It will be visible on the top right corner of the menu page.

FRONT-END SCREENSHOT

Switch to RTL (Right-to-Left) Mode ↑ Back to top

How-to-guide – Switching to RTL mode

RTL (Right-to-Left) mode changes the direction of the language used in the food menu. This is usually used by languages written from right to left (Arabic, Hebrew, etc.). It will be disabled by default.

  1. Select the radio button labeled “Yes“.

FRONT-END SCREENSHOT

General Modifiers ↑ Back to top

How-to-guide – Enable General Modifiers

  1. You will find the option to enable or disable General Modifiers in the General Settings tab.

  2. Once the General Modifier option is enabled,  click on the Save Changes button.
  3. A new option will appear in the Dashboard titled General Modifier.

How-to-guide – Add Modifiers

  1. Click on the General Modifier option on the Dashboard.
  2. Click on the Add Modifier button to create a new modifier.

Creating a modifier name

  1. Create the name of your Modifier by entering text in the input field.

Modifier Description

  1. Set the description of your Modifier by entering text in the input field.

Product Categories

  1. Select Product Categories from the dropdown list.
  2. You can choose multiple Product Categories for every modifier.

Display Type

  1. Choose the display type of the Modifier.
  2. You can choose between three types: Select box, Checkbox, and Radio Button.

Is Required?

  1. If you choose “YES” as your option then the user will not be able to complete his order until he/she has selected this modifier.
  2. If you choose “NO” as your option then the modifier will become an optional field.

FRONT-END SCREENSHOT

Modifier Options

  1. Add the name and price of your Modifier option.

  2. You can add more modifier options by clicking the Add Option button.
  3. You can also delete any respective modifier by clicking on the Trash icon next to each modifier.
  4. Click on the Publish button to save your modifiers and apply changes.

FRONT-END SCREENSHOT

  1. Select the Product category.
  2. The category will expand and the products will appear.
  3. Click on the sign beside the image of the item.

How-to-guide – Assigning modifiers to products

Admin can also assign modifiers to a product by navigating to Admin Dashboard → Products → All Products

  1. Hover on the respective item and click on the Edit option.
  2. Go to the Product Data section and navigate to the RMS Modifiers tab.
  3. Select the Enable radio button and select the modifier from the dropdown list.
  4. Once done, click on the Update button.


Style settings

Theme color ↑ Back to top

How-to-guide – Select and customize a theme color

  1. Click on the Theme Color input field.
  2. Insert the color code or select the color using a color grid.
  3. Click on the Save Changes button.

FRONT-END SCREENSHOTS

BEFORE

AFTER

General text color ↑ Back to top

How-to-guide – Select and customize general text color

  1. Click on the text color input field.
  2. Insert the color code or select the color using a color grid.
  3. Click on the Save Changes button.

 

FRONT-END SCREENSHOTS

BEFORE

AFTER

Heading color

How-to-guide – Select and customize heading color

  1. Click on the text color input field.
  2. Insert the color code or select the color using a color grid.
  3. Click on the Save Changes button.

FRONT-END SCREENSHOTS

BEFORE

AFTER

Cart type & Sliding Cart icon ↑ Back to top

There are two Cart Type options available in the plugin:

Standard cart type

How-to-guide – Select Standard cart type

  1. Choose the Standard radio button option as Cart Type
  2. Click on the Save Changes button.

FRONT-END IMPACT

The cart would appear as:

  • When the user adds a product, the cart would appear like this:

Sliding cart type

How-to-guide – Select Sliding cart type

  1. Choose the Sliding radio button option as Cart Type

  2. You can also upload an image for the Sliding Cart Icon.
  3. Click on the Save Changes button.

FRONT-END SCREENSHOT

  • The cart would appear as:

  • When the user adds a product, the cart would appear like this: 

Cart icon background color

How-to-guide – Select and customize cart icon background color

  1. Click on the text color input field.
  2. Insert the color code or select the color using a color grid.
  3. Click on the Save Changes button.

FRONT-END SCREENSHOT

BEFORE

AFTER

Sliding cart background color ↑ Back to top

How-to-guide – Select and customize the sliding cart background color

  • Click on the text color input field.
  • Insert the color code or select the color using a color grid.
  • Click on the Save Changes button.

FRONT-END SCREENSHOT

BEFORE

AFTER

Sliding cart text color ↑ Back to top

How-to-guide – Select and customize the sliding cart text color

  1. Click on the text color input field.
  2. Insert the color code or select the color using a color grid.
  3. Click on the Save Changes button.

FRONT-END SCREENSHOT

BEFORE

AFTER

Sliding checkout button color ↑ Back to top

How-to-guide – Select and customize the sliding checkout button color

  1. Click on the text color input field.
  2. Insert the color code or select the color using a color grid.
  3. Click on the Save Changes button.

FRONT-END SCREENSHOTS

BEFORE

AFTER

Sliding checkout button text color ↑ Back to top

How-to-guide – Select and customize the sliding checkout button text color

  1. Click on the text color input field.
  2. Insert the color code or select the color using a color grid.
  3. Click on the Save Changes button.

FRONT-END SCREENSHOTS

BEFORE

AFTER


Label settings ↑ Back to top

Cart widget title ↑ Back to top

How-to-guide – Define cart widget title

  1. Go to the label settings tab.
  2. Enter the Cart widget title in the input field.
  3. Click on the Save Changes button.

FRONT-END SCREENSHOTS

Checkout button text ↑ Back to top

How-to-guide – Define checkout button text

  1. Enter the Checkout button text in the input field.
  2. Click on the Save Changes button.

 

FRONT-END SCREENSHOTS

No item in the cart text ↑ Back to top

How-to-guide – Define no item in the cart text

  1. Enter the No Item text in the input field.
  2. Click on the Save Changes button.

 

FRONT-END SCREENSHOTS

Restaurant time schedule title ↑ Back to top

How-to-guide – Define restaurant time title

  1. Enter the restaurant time title in the input field.
  2. Click on the Save Changes button.

FRONT-END SCREENSHOTS


Timing settings ↑ Back to top

Display restaurant timings ↑ Back to top

How-to-guide – Display restaurant timings

  1. Choose the Enable the radio button
  2. Restaurant timings would appear on your website. This option would be disabled by default. 

Open/Closing time format ↑ Back to top

How-to-guide – Select opening/closing time format

  1. Select the 12-hour time format or 24-hour time format by selecting the appropriate radio button. 

FRONT-END SCREENSHOTS

Time schedule in a 24-hour time format

Opening and closing time slots ↑ Back to top

How-to-guide – Define opening & closing time slots

The Admin has all days of the week and the Admin will set the timings of the restaurant accordingly. These are the timings that will appear on the website when Show Restaurant Timings option will be enabled.

  1. Enter the time in the Open time slot.
  2. Enter the time in the Close time slot.

Add time slots for each day ↑ Back to top

How-to-guide – Add time slots for each day

  1. Add time slots by clicking on the Add Slot button.
  2. Enter the open and close time in the input field.
  3. Delete any slot by clicking the Trash button next to each slot.
  4. Click on the Save Changes button.

FRONT-END SCREENSHOTS

  • Click on the angle-down icon to expand the opening and closing time schedule of the restaurant.

  • If the user visits the restaurant on the day it is closed, the status would appear as Closed and the opening and closing timings of the entire week would be displayed when the user will click on the angle-down icon.

  • If any user tries to order from the restaurant on the day it is closed, a message is dispalyed.


Delivery settings ↑ Back to top

Select the Enable radio button to display the delivery options on the front-end food menu. This option would be disabled by default. 

Delivery options ↑ Back to top

How-to-guide – Add delivery options

  1. Enter the name and value of the Delivery Option.
  2. Add more delivery options by clicking on the Add Delivery option.
  3. Delete the delivery option by clicking on the trash can icon next to the option.
  4. Click on the Save Changes button.

FRONT-END SCREENSHOTS

BEFORE

AFTER


Notification settings ↑ Back to top

NOTE: For this option to work, you need to keep your dashboard logged in.

Enable notifications ↑ Back to top

How-to-guide – Enable notifications

  1. Select the Enable the radio button. This option would be disabled by default. 

Notifications alert ↑ Back to top

How-to-guide – Enable notification alerts

  1. Select the Enable radio button to play a sound when a new order is received. This option would be disabled by default. 

Upload alert sound ↑ Back to top

How-to-guide – Upload alert sound

  1. You can select the Alert Sound from the dropdown list or upload an alert sound. 
  2. Click on the Upload button from the Upload Sound option.
  3. Select the file you want to upload.
  4. Once done, click on the Choose Audio button.
  5. Once the upload is successful, a notification will appear below the upload button labeled as “File uploaded successfully
  6. The upload audio file will appear in the Alert Sound dropdown list.
  7. Select the audio from the Alert Sound dropdown list.
  8. Click on the Save Changes button.

FRONT-END SCREENSHOTS

When a user visits your website and orders from your restaurant, the admin will receive a notification at the right bottom of the page.

If the Admin clicks on the link mentioned in the notification, they will be redirected to the customer’s order page.


Vendor settings ↑ Back to top

NOTE:

  • You need WooCommerce Product Vendors plugin to configure the options in the Vendors tab.
  • When converting the vendor single product page into a restaurant food menu, the plugin will only display the products that were part of the vendor single product page.

Menu view type ↑ Back to top

You have the option to select from two menu view type options:

  • Grid View: The items in the menu will appear in a grid.
  • List View: The items in the menu will appear in a list.

FRONT-END SCREENSHOTS

GRID VIEW

LIST VIEW

Pagination (Items-per-page) ↑ Back to top

How-to-guide – add items-per-page

  1. Enter the number of items you want to display per page in the input field. The number is set to 10 by default.

FRONT-END SCREENSHOTS

As you can see, 3 items were associated with this vendor and we set 2 items per page in the Items per page option.

Menu filter & filter position ↑ Back to top

How-to-guide – Enable menu filter

  1. Select the Enable radio button so the restaurant would display a menu category filter on your website. This option would be disabled by default. 

How-to-guide – Set the menu filter’s position

From the menu filter position dropdown list, select from the following options:

  • Left view: The menu filter will appear on the left of the menu.
  • Top view: The menu filter will appear at the top of the menu.

FRONT-END SCREENSHOTS

Top view

Left view

Display image in pop-up ↑ Back to top

How-to-guide – Display product image in pop-up

  • Select the Enable radio button option to show the product image in the popup. This option would be disabled by default.

FRONT-END SCREENSHOT

When the option is enabled. 

  • When the user visits the website and click on the ➕ sign to add the item.

  • The Image of that item would appear.

When the option is disabled.

  • When user visits the website and click on the ➕ sign to add the item.

  • The Image of that item would not appear.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment