Adding an Opening Hours System

No mat­ter if you’re run­ning a restau­rant busi­ness, a local shop or an office build­ing, clear com­mu­ni­ca­tion is always cru­cial. Small details such as the avail­abil­i­ty hours can make or break a dia­logue between you and your future cus­tomers. To avoid mis­un­der­stand­ings of this kind, we cre­at­ed the easy-to-use Open Hours plu­g­in, per­fect for cre­at­ing a sched­ule and keep­ing track with it at all times.

Setting up your Opening Hours

First things first, you need to get and acti­vate the actu­al plu­g­in on your Word­Press web­site. That can be achieved either by down­load­ing it from direct­ly or by search­ing and adding it from your Plu­g­ins Man­age­ment Page, in your Word­Press dash­board. The plu­g­in is called Open Hours and you should be able to find it fair­ly easy (it’s the one that says devel­oped by pix­el­grade).

After get­ting the plu­g­in, you can go ahead and set up your sched­ule. Assum­ing the plu­g­in is active, all you need to do is go to the Cus­tomiz­er area and click on the Open Hours option.

In there you should see a text area where you can write your busi­ness’ open­ing hours in a wide range of for­mats, whichev­er you feel is eas­i­er for you. Assum­ing you run a busi­ness that’s open from 9 to 5, Mon­day through Fri­day and you’re closed on Sat­ur­day and Sun­day, you can enter some­thing like:

monday to friday 9 - 17

You can pret­ty much choose whichev­er for­mat fits you best. You don’t need to write in the days of which you’re closed. We will auto­mat­i­cal­ly assume that the days that are left out are closed days.

m-w 10:15am-2am; fri 12pm-11pm;
mon, tues, wednesday 1015-2; f 12:00p until 2300;
mon-tu, w 10:15 A.M.-02h00; f 12:00 until 23:00;
m-f 10-12
10:15am-2am m-w; 12pm-11pm fri,su

You have the pos­si­bil­i­ty of view­ing your sched­ule changes in real-time in the box next to our text area. The exam­ples above will input some­thing sim­i­lar to:

Now that you’ve set­up a sched­ule all that’s left is to actu­al­ly dis­play it on our web­site.

Note: To make sure your cus­tomers are as aware as pos­si­ble of your oper­at­ing hours we have, along with the actu­al sched­ule, devel­oped a way to let them know about the cur­rent sta­tus of your busi­ness. That will pick up on the sched­ule you have set­up above and will allow you to cre­ate an Open and a Closed note to the tell the world what your cur­rent avail­abil­i­ty is.

Displaying your Opening Hours

You have two pos­si­bil­i­ties of doing that, depend­ing on your famil­iar­i­ty with the Word­Press plat­form:

1. Using the “Open Hours” Widgets:

There are two wid­gets and they can both be added to your web­site with­out leav­ing the Cus­tomiz­er.

You will need to go to the Appear­ance — Wid­gets — click on an area where you would like them dis­played (Foot­er, Side­bar) -> and then hit the add a Wid­get but­ton. Search­ing for “Open Hours” should give you the option of select­ing either of the two wid­gets men­tioned above.

1.1 Open Hours: Overview Widget

The first wid­get is the Open Hours: Overview wid­get and is for dis­play­ing the actu­al sched­ule. It is pret­ty straight­for­ward to con­fig­ure:

You can select a Title — which can be some­thing like “These are our oper­at­ing hours”.

After choos­ing a title for your wid­get — you have a cou­ple of options you can use there to make these hours as easy to grasp as pos­si­ble:

  • com­press your open­ing hours: so if you have days with sim­i­lar sched­ules, you dis­play a com­pressed ver­sion (i.e. Mon­day — Fri­day 9 AM — 5 PM)
  • hide closed days: if you believe that adds too much con­tent to the sched­ule
  • select a time for­mat: that cor­re­sponds to Word­Press’ sup­port­ed time for­mats
  • short day names: instead of Mon­day you’ll get Mon.
1.2 Open Hours: Current Status

This wid­get allows you to set up a sta­tus to let your cus­tomers know if you’re open or closed at the par­tic­u­lar moment they are vis­it­ing your web­site.

After enabling this wid­get — you have the option of set­ting an open note and tell your cus­tomers you’re cur­rent­ly open and a closed note, let­ting them know oth­er­wise.

To make this a bit more fit­ting to your needs we have also devel­oped a few replace­ment tags you can use in your notes — that will pick­up data from the sched­ule you’ve pre­vi­ous­ly set­up. For exam­ple writ­ing “It’s {time} and we are open until {today-end-time}” will dis­play some­thing like “It’s 3:45pm and we are open until 5pm”.

The full list of sup­port­ed replace­ment tags can be seen below:

Tag Descrip­tion
{time} Will be replaced by the cur­rent Word­Press instal­la­tion time.
{today} Will be replaced by the name of the cur­rent day.
{today-open­ing-time} Will be replaced by the cur­rent day’s open­ing time.
{today-clos­ing-time} Will be replaced by the cur­rent day’s clos­ing time.
{today-time­frame} Will be replaced by the cur­rent day’s open-closed time­frame.
{next-open­ing-day} Will be replaced by the next day’s (in which you will be open) name.
{next-open­ing-time} Will be replaced by the open­ing time of your next open day.
{next-clos­ing-time} Will be replaced by the clos­ing time of your next open day.
{next-open­ing-time­frame} Will be replaced by the open-closed time­frame of your next open day.

2. Using Shortcodes

The short­codes will pret­ty much have the same out­put and func­tion­al­i­ty as the wid­gets above do, with the dif­fer­ence that they can be used any­where in your con­tent, not only in the espe­cial­ly designed Wid­get Areas.

The two short­codes we have devel­oped are called: [open-hours-overview] and [open-hours-cur­rent-sta­tus] and they will require some addi­tion­al para­me­ters (the ones that you can also set up in the wid­gets) to make them work accord­ing­ly.

The overview short­code should look some­thing like this:
[open-hours-overview title="My Business Open Hours"]

After adding this to a post’s con­tent, for exam­ple, this short­code will dis­play the open­ing hours you have set­up in a table, which will pick up the style (for tables) from your theme.

The cur­rent sta­tus short­code requires a bit more para­me­ters, both the *open* and *closed* notes:
[open-hours-current-status open_note="We are currently open, feel free to drop by!" closed_note="We are closed now, but we will be open again on {tomorrow-start-time}"]

And you’re done — you now have an easy to read dis­play of your oper­a­tional hours so your cus­tomers will know exact­ly when they can reach you!

Available Shortcode Options
Option Descrip­tion Choic­es Default Set­ting
title The title of your sched­ule. Leave it out if you do not want a title. Any string. I.e. “My short­code title” N/A
time_format The time for­mat to be used when dis­play­ing hours. For a full list of sup­port­ed for­mats, you can refer here. “g:i A”, “g:i:s”, etc. “g:i A”
 title  The title of your sched­ule. Leave it out if you do not want a title.  Any string. I.e. “My short­code title”  N/A
 open_note  The note that will be dis­played dur­ing your open hours.  Any string: “We are open now”  N/A
 closed_note  The note that will be dis­played dur­ing your closed hours.  Any string: “We are closed now”  N/A
 time_format The time for­mat to be used when dis­play­ing hours. For a full list of sup­port­ed for­mats, you can refer here.  “g:i A”, “g:i:s”, etc.  g:i A”

All of us, here at pix­el­grade, hope you enjoy and ben­e­fit from this plu­g­in and any feed­back you might have is more than wel­comed!

This article applies to Osteria, as they share the same underlying structure.

Updated on November 16, 2017

Was this article helpful?