Create your restaurant’s table layout and let customers choose which table they want to book. This saves your staff’s time managing customer seats and also makes it convenient for guests to choose their preferred seats.
🔹 NOTE: Table Reservation modules works only with Single Slot Reservation.
Enable Table Layout from Tools #
From your dashboard, go to WPCafe -> Tools. Here you will need to enable Table Layout and you will see a new menu for Table Layout.
Create Visual Table Mapping #
After enabling table layout, you are ready to create your visual table mapping. First step for this is to set your schedule and seat capacity
Set Schedule and Seat Capacity #
Remember that table layout selection only works with single slot. Go to WPCafe -> Settings -> Reservation -> Schedules. Here, you need to set the following and save changes:
- Reservation Multi-slot Schedule: Turn it off
- Seat Capacity for Single Slot: Set the seat capacity for your schedule
Design Table Layout #
Go to WPCafe -> Table Layout and start editing the following settings.
- Seat Capacity: You can update the seat capacity from the Schedule Tab by clicking the link.
- Table, Chair, Text, Selection and Booked Fill Color: Choose different colors for each object in your table layout mapping.
- Room Background Image: Select a background image for your mapping. You can take a picture of your restaurant layout and add it here.
- Room Width & Height: Set a height and width for your room
Visual Table Mapping Elements #
Now you are ready to start creating your design. You will find the following list of elements to make your table layouts. Click on any element and drag them to organize them. You can also adjust table sizes by dragging the corners.
🔹 NOTE: Make sure to connect chairs with tables or else you will get an error message. Remember your seat capacity and set the number of chairs accordingly.
- Add Corner Table – Add rectangle table. Each table will have a corresponding number.
- Add Round Table – Add round table. Each table will have a corresponding number.
- Add Chair -Add chair to your mapping. Each chair will have a corresponding number
- Add Text – Add any text to your restaurant layout
- Zoom In – Zoom in table restaurant layout
- Zoom Out – Zoom out table restaurant layout
- Delete Selected Item – Choose an item you want to delete
Add Table Layout with Shortcode #
Go to WPCafe -> Available Shortcodes -> Reservation Form with Visual Table/Seat Selection (Pro) and click on Generate Shortcode. Select a Template and Style and click on Generate. Now copy this shortcode and paste it on your site page.
Final Output #
This is what guests will see when they place their reservations. Notice how the different color shows which seats are available, unavailable and selected.
Add Table Layout with Elementor Widget #
Similar to the Shortcode, you can add a visual table layout with the Elementor widget. Simply, edit your intended page with Elementor and from the left side editing panel, add the “WPCafe visual table Pro” widget. Update the page and you are done.
- Settings Key: Edit page with Elementor -> Add “WPCafe visual table Pro” -> Save
