Each restaurant or business will have different opening hours. To have that information and display them for each on a website, there might be some techniques including using custom fields. We’re going to add an Opening Hours section into the single restaurant page in this tutorial as this example:

The example of adding an Opening Hours section into the single restaurant page.

Before Getting Started

For having extra information such as time slots for each day, we’ll use custom fields. So, we need the Meta Box plugin to have a framework to create them. It’s free and available on wordpress.org. Furthermore, we also need some advanced features from Meta Box that are available in the following extensions:

  • MB Views: a premium extension of Meta Box. It helps you create templates and display the custom fields’ value on the frontend without touching the theme’s files;
  • Meta Box Builder: this premium extension of Meta Box provides an intuitive UI in the back end to create and configure custom fields without using code;
  • MB Group: this extension helps to arrange fields into groups;
  • MB Conditional Logic: this premium extension allows you to create rules to control the display of the fields.

After installing and activating all these plugins, let’s move to the how-to parts right now.

Video Tutorial

Step 1: Create Custom Fields

Normally, we will create a new custom post type for the restaurants first. I skipped that step since I already had it on my website. If you haven’t had it yet, create it first then go to this step.

Go to Meta Box > Custom Fields > Add New to create a new field group. Then, add custom fields with the structure like this:

Name ID Type Options Condition
Choose an option choose_an_option select 1. all_days_are_the_same
2. difference_between_weekdays_and_weekend
3. custom
All days have the same opening hours all_days_have_the_same_opening_hours group display only when:
the choose_an_option field = the all_days_are_the_same option
Type of opening hours type_of_opening_hours select 1. open_all_day
2. close_all_day
3. by_appointment_only
4. enter_hours
Choose time slots choose_time_slots group display only when: the type_of_opening_hours field = the enter_hours option
Start time start_time time picker
End time end_time time picker
Weekdays weekdays group display only when: the choose_an_opton field = the difference_between_weekdays_and_weekend option
Type of opening hours type_of_opening_hours_weekdays select 1. open_all_day
2. close_all_day
3. by_appointment_only
4. enter_hours
Choose time slots choose_time_slots_weekdays group display only when: the type_of_opening_hours_weekdays field = the enter_hours option
Start time start_time_weekdays time picker
End time end_time_weekdays time picker
Weekend weekend group display only when: the choose_an_opton field = the difference_between_weekdays_and_weekend option
Type of opening hours type_of_opening_hours_weekend select 1. open_all_day
2. close_all_day
3. by_appointment_only
4. enter_hours
Choose time slots choose_time_slots_weekend group display only when: the type_of_opening_hours_weekend field = the enter_hours option
Start time start_time_weekend time picker
End time end_time_weekend time picker
Monday monday group display only when: the choose_an_option field = the custom option
Type of opening hours type_of_opening_hours_monday select 1. open_all_day
2. close_all_day
3. by_appointment_only
4. enter_hours
Choose time slots choose_time_slots_weekend group display only when: the type_of_opening_hours_monday field = the enter_hours option
Start time start_time_weekend time picker
End time end_time_weekend time picker
Sunday

As you saw in the table above, the first field is a select field and there are 3 options that I filled in the Choice box as below.

Fill in the Choice box for the select field.

These 3 options will be used to set the display rule of other group fields.

To set conditions to groups, for example, with the All days have the same opening hours group. Go to the Advanced tab, and then set the rule in the Conditional Logic section like this:

Set conditional logic for the All days have the same opening hours group.

This rule means this group will be displayed when the Choose an Option field is selected as All days have the same opening hours option which has the value is all_days_are_the_same.

Similarly, if the Choose an Option field is chosen as the Difference between weekdays and weekend options, all the subfields of the Weekdays and Weekend group will be displayed. Or if the Choose an Option field is selected as the Custom option, the group fields for every day in a week will be shown up. That’s the concept of how to create fields.

In each group field, I also have subfields with the same structure.

The Type of Opening Hours field is the select field. I have 4 options in the Choice box:

  • Open All day;
  • Close All day;
  • By Appointment Only;
  • Enter Hours.

If the restaurant has different opening hours, you can choose Enter Hours to display Start Time and End Time field in the Choose Time Slots group. So, I will set the rule for this group like this:

Set the rule when the restaurant has different opening hours.

In case the restaurant opens in multiple time slots, we’ll need this group to be cloneable. So, I tick this box as below:

In case the restaurant opens in multiple time slots, choose cloneable

After creating all the fields, go to the Settings tab of the field group, choose Location as Post Type, and select Restaurant to apply these fields to this post type.

Publish this field group and go to the post editor in Restaurant, you will see the custom fields here.

The custom fields are displayed.

They work exactly like the rule we set.

Step 2: Display the Fields’ Value on the Frontend

In this step, we’ll get the input data from those custom fields to display into the Restaurant single page. To do it, we’ll use MB Views in order not to touch the theme’s file.

If you’ve had a template created by MB Views for the Restaurant single page already, just go to it and edit. If not, create one. Then, add code to the view.

The code is quite long, so I put it in my Github here. You can refer to it for more details. The code is divided into several parts to get corresponding group data. Because of the same concept in all parts, I’ll explain a typical part to be more clear about the logic.

<div class="opening-hours">
<h2>
    Opening Hours
</h2>
<div class="detail-schedule">
    {% set options = post.choose_an_options.value %}
    {% if (options == "all_days_are_the_same") %}
        {% set same_days = post.all_days_have_the_same_opening_hours.type_of_opening_hours.value %}
        {% if ( same_days == "enter_hours") %}
        <div class="date-time">
            <div class="date">
                Mon - Sun
            </div>
            <div class="hour">
            {% for clone in post.all_days_have_the_same_opening_hours.choose_time_slots %}
            <div class="time-slot">
                <p class="starting-hour">
                    {{ clone.start_time | date( 'h:i A' ) }}
                </p>
                <p class="ending-hour">
                    {{ clone.end_time | date( 'h:i A' ) }}
                </p>
            </div>
            {% endfor %}
            </div>
        </div>
    {% else %}
    <div class="date-time">
        <div class="date">
            Mon - Sun
        </div>
        <div class="hour">
            {{ post.all_days_have_the_same_opening_hours.type_of_opening_hours.label }}
        </div>
    </div>
    {% endif %}

Here I created a variable named options to admit the value from the Choose an Option field. Then I set a rule based on its value to display values from the subfield in the corresponding group. It’s quite the same with the rules we created when configuring the fields.

First, if its value is all_day_are_the_same, the values of fields in the All days have the same opening hours group will be displayed.

Get the value of field in All days have the same opening hours group.

I set a variable named same_days to admit the value from the Type of Opening Hours field. If it is enter_hours, the Choose Time Slots group will be obtained and displayed the data. As we set before, this group is cloneable, so there is a loop here.

Set the value of field in Choose Time Slots group.

After adding code, depending on if the view is new or not, choose the right Type and Location for the view in the Settings section.

Go to the single Restaurant page and see how the opening hours section displays.

The opening hours section is displayed before styling.

All the time slots are shown exactly as I input in the backend. But this section doesn't look as good as I want. So, I will add some CSS to style this section in the next step.

Step 3: Style the Opening Hours Section

Still, in the view of the single Restaurant page, go to the CSS tab.

Go to the CSS tab to style the Opening Hours Section

And then, add the code below.

.container.detail-restaurant .opening-hours {
    max-width: 300px;
    margin: 0 auto;
    width: 100%;
}

.container.detail-restaurant .opening-hours h2 {
    margin: 0 0 10px;
        text-align: center;
        border: 4px solid rgba(231,57,72,.85);
    border-right: 0;
    border-left: 0;
}

.container.detail-restaurant .detail-schedule .date-time {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
        align-items: baseline;
}

.container.detail-restaurant .detail-schedule .date-time .hour .starting-hour:after{
    content: '-';
    margin: 0 5px;
}

.container.detail-restaurant .detail-schedule .date-time .hour .time-slot {
    display: flex;
}

.container.detail-restaurant .detail-schedule .date-time .date {
    font-weight: 700;
    font-size: 15px;
}

.container.detail-restaurant .detail-schedule {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
        border-bottom: 4px solid rgba(231,57,72,.85);
    padding-bottom: 10px;
}

Now, go back to the single restaurant page, you’ll see the Opening Hours section looks much more beautiful.

The Opening Hours section looks much more beautiful.

Last Words

If you’re running an online food order platform or own a business that has several branches with different time zones, this tutorial may make sense to you. Try it out and share the results in the comment section. For other page builders, we’ll have some upcoming tutorials. By the way, if you have any idea about any other tutorials, feel free to leave a comment. Thank you for reading. Good luck!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page - P7 - Using Meta Box + Kadence
  26. How to Create a Product Page - P8 - Using Meta Box and Brizy
  27. How to Create a Product Page - P9 - Using Meta Box and Divi
  28. How to Create a Product Page using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe - P9 - Using Meta Box and Divi
  37. How to Create a Recipe with Meta Box Plugin
  38. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  39. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  40. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  41. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  42. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  43. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  44. How to Create a Team Members Page - P4 - Just Meta Box
  45. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  46. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  47. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  48. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  49. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  50. How to Create a Video Gallery Page - P5 - Using MB Views
  51. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  52. How to Create a Video Gallery Page Using Meta Box + Oxygen
  53. How to Create ACF Flexible Content Field with Meta Box
  54. How to Create an Auto-Updated Cheat Sheet in WordPress
  55. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  56. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  57. How to create an FAQs page - P4 - Using Meta Box and Bricks
  58. How to Create an FAQs Page - P6 - Using MB Views
  59. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  60. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  61. How to Create an FAQs Page -P3- Using Meta Box
  62. How to Create Buttons with Dynamic Link using Custom Fields
  63. How to Create Category Thumbnails & Featured Images Using Custom Fields
  64. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  65. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  66. How to Create Download and Preview Buttons - P3 - Using MB Views
  67. How to Create Download Buttons in WordPress - Using Custom Fields
  68. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  69. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  70. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  71. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  72. How to Create Notification Using Custom HTML Field
  73. How to Create Online Admission Form for School or University
  74. How to Create Online Reservation Form for Restaurants using Meta Box
  75. How to Create Relationships - P1 - Using Meta Box and Oxygen
  76. How to Create Relationships - P2 - Using Meta Box and Bricks
  77. How to Create Relationships - P3 - Using MB Views
  78. How to Create Relationships - P4 - Using Meta Box and Breakdance
  79. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  80. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  81. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  82. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  83. How To Display All Listings On A Map With Meta Box
  84. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  85. How to Display Author Bio in WordPress - P2 - Using MB Views
  86. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  87. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  88. How to Display Images from Cloneable Fields - P3 - with Elementor
  89. How to Display Images from Cloneable Fields - P4 - with Bricks
  90. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  91. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  92. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  93. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  94. How to Display Product Variations - P3 - Using Meta Box and Bricks
  95. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  96. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  97. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  98. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  99. How to Display the Latest Products Section - P4 - Using Meta Box + Zion

5 thoughts on “How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg

  1. Can you please show how to display the opening hours with php and not with the MB Views addon? Thank you

    1. Thanks for your question. To display the opening hours with PHP, this includes in our next tutorial so please wait and look for it to come. We'll release it soon.

  2. Can you please share how to display the opening hours with oxygen dynamic data?
    I can render every fields besides the opening hours. It returns empty value. So it shows nothing. Maybe because its to nested? I followed exactly your tutorial but does not find any solution.

Leave a Reply to shmaltz Cancel reply

Your email address will not be published. Required fields are marked *