“Store Open” or “Store Closed” Message for Any Given Day Based on the Opening and Closing Times Set via ACF Options

This members-only tutorial provides the steps to display a "We are open" or "We are closed" message based on the opening and closing times set in an Options page using ACF.

Let's say at this moment it is Monday 4 pm per the timezone set in the WordPress site's settings, after implementing the tutorial you will be able to display a "We are open. Come on in." message anywhere on the site (like in the site header). And suppose it is Monday 5.15 pm, the message will instead become "Sorry, we are closed."

We are going to

• add ACF options page
• create a field group having an opening_hours Repeater field with 3 sub fields: day, opening_time and closing_time where the last two are "Time Picker" fields
• populate the Repeater
• write custom code that
  • exits if ACF is not active
  • gets current date and time
  • loop through the Repeater rows and for each continue only if current date = current row's day sub fields' value. When continued, format opening and closing times into Unix timestamps, and echo the open message if current time is between opening and closing times else echo the closed message.
  • add a little bonus code that checks if the closing time is less than an hour and add a "Hurry up! we are closing in about x minutes" message. And ensure that the open message is not shown if the time left to close is less than a minute.

Step 0

Go to Settings > General.

From the Timezone dropdown select the city from which your store runs.

Save changes.

Step 1

Install and activate ACF Pro and Code Snippets plugin.

Go to Snippets > Add New.

Title: ACF Options page

Code:

if ( function_exists( 'acf_add_options_page' ) ) {
    acf_add_options_page();
}

Set the snippet to run only in the admin. Save changes and activate.

Step 2

Add a new field group titled say, "Sitewide".

Add an opening_hours Repeater field with 3 sub fields:

• day - Select with these choices:

Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday

• opening_time - Time Picker
• closing_time - Time Picker

In the Location meta box set this rule: Options Page = Options.

Step 3

Click on Options in the left side admin menu.

Select the day and pick corresponding opening and closing times.

Ensure that there are no rows with duplicate days (Ex.: two rows with Monday) because we aren't accounting for such a possibility in the code.

Step 4

Add this code wherever you would like to output the open or closed message: