How to Easily Display Your Opening Hours in WordPress
Most will agree that, when running a business, you need to make it clear to your customers when you’re there for them and when not – and this is why it’s important to prominently display your opening hours in WordPress.
This may be more common for, or expected of, brick-and-mortar shops, but even online services might not be available 24/7. Posting your opening hours on your website makes it easier for your visitors – and prospective customers – to plan visits to your stores, to book appointments, tickets or tables, or make calls to your support staff. They will also know when they can expect a customer service representative to return their call – especially useful if your customers are in a different time zone.
With opening hours prominent on your website, you can show your customers how punctual and professional you are. By proving that you value their time, you will make them value your services even more. This is why there are a lot of business-oriented WordPress themes with a built-in working hours shortcode.
But in case your theme doesn’t come with built-in opening hours, in this article, we will show you several ways to display them on your site using the Business Hours Indicator plugin. Here’s what we’ll cover:
We suggest using the Business Hours Indicator plugin, and we will be showing you around its free version.
The first thing you need to do is install the plugin on your WordPress website.
Once the plugin is installed and activated, you’ll need to configure it from its settings screen.
In the general tab, select the time zone you are operating in from the time zone menu. We picked Belgrade. Then, select the time format you wish your hours to be displayed in. Choose between 12 or 24 hours. We chose the 24 hour format.
Next, go to the hours tab. Click on the add location button to create a new shop location.
Now it’s time to name your shop. We named our shop Bridge_Shop for this example. If you want to rename the shop you have to delete and recreate it, using the X button on the right.
Your shortcodes will use this name to display the opening hours you just set. If you have multiple shops, you will have to create separate locations for each one of them. If you have different opening hours in different time zones, this is a feature you might especially want to take note of.
Once you create your shop, you will see that you have some new options (edit hours, holidays, and vacation).
First, we will set up the regular hours using the edit hours option. Set up the opening hours using the menus for each day. When we are done, we will click the done button in the lower left. Note that leaving the hours for a day blank will mark the shop as closed for the day with no special settings required.
Back on the hours tab, use the holidays option to set up special hours during the holidays.
Say Bridge_Shop is not open on December 25th and January 1st. You set that up by simply selecting the date from the menus on the left and leaving the times blank, then clicking the plus button on the right to add another day.
Say Bridge_Shop opens for 4 hours every January 2nd. You may set that up by setting the date using the menu on the left and the time using the ones on the right.
Again, when done, we will click the done button in the lower left.
Next, selecting the vacations option, we will set up days off for Bridge_Shop. Simply mark the days off interval using the date menus and clicking the plus button on the right to add as many intervals as necessary.
Once more, when done, we will click the done button.
Now we have set up the regular hours, holidays, and vacation days for Bridge_Shop.
You can always go back and reedit them, because holidays may change date, and vacations even more so.
Selecting the indicator tab, you will find several options for the open/closed indicator.
You may want your visitors to know at a glance whether a store of yours is open or closed. This is also a good chance to personalize your website, make it less generic. We will edit the open and closed messages using some HTML (we’ll add a
<b> tag for bold and the closing tag
</b> to end the bold section) for emphasis.
You can see the effect in the example window on the right-hand side.
This indicator tab also includes the time and day options. You may check them if you want your visitors to see the current time and day for your shop, dependent on the time zone. If you have set up your “open” and “closed” indicators, they will be active during holidays and vacations.
The final set of options is the opening/closing soon notification. When checked, this box opens a set of very useful options.
You may want to indicate if your shop opens or closes soon. You may also choose to personalize these messages, as we have. Be careful to use an X between curly brackets for the number of minutes before or until closing time. You can see an example in the picture below.
Next, we get to the table tab.
The table tab is used to customize the appearance of your opening hours on your website. You may choose to display your opening hours in different ways dependent on the website’s layout.
The normal display mode simply lists opening hours for each day.
The consolidated display mode conflates all the hours in consecutive days which share the same opening hours.
The table display mode shows the opening hours as a table, but if you want an inline view, you have the inline mode. This works better if you want your opening hours to fit a horizontal bar, say.
You may also want to display vacation times and holidays at all times. You can do this using the provided checkboxes.
Finally, we come to the nuts and bolts: the codes tab. This is where you can copy your shortcodes and paste them to where you need them.
There are several shortcodes to choose from. The one we are most interested in here is the overview shortcode, but you can use these all over your website. You may, for instance, choose simply to display the open/closed indicator as a welcoming message in individual posts.
We have now configured the plugin and familiarized ourselves with its options. There are many ways in which we can use it to display our opening hours on our website’s front end.
Here is how to display your hours in a post using WordPress’s default Gutenberg block editor. First copy the business hours shortcode from your plugin’s codes tab, and open a post you are editing.
Click the plus sign in its top left corner to open the block picker. Now search for the shortcode block, and add it to your page.
Paste your shortcode into the block.
Remember to change “your location name” to the location you want the hours of to appear in a post.
To see if your opening hours have been displayed correctly, click the preview button in the upper right.
And that’s all there is to it. Now we’ll take a closer look at how to do the same using the Classic editor.
The first thing you need to do is install and activate the Classic Editor plugin.
Next, after having configured your Business Hours Indicator plugin, you need to go to its codes tab and copy the shortcode you want.
Say you want to display your working hours as a post. Simply go to your post editing screen and paste it where you want to see it on your page.
Remember to edit the shop name in your shortcode (change it to your location name.).
You can click the preview button to see how your opening hours will appear on your website.
Now you know how to display your opening hours in a post. You might also want to display it as part of another element of your website, such as the header or the footer.
If you want to display your opening hours in your website’s header or footer, or indeed any other widget area on your site, simply go to the Appearance > Widgets screen of your WordPress dashboard.
The next thing you need to do is find a place for your widget. We have selected the third footer column widget area.
You then need to find your Business Hours Indicator plugin in your Available Widgets library. Select [BHI] opening hours overview, and then choose Footer column 3 from the drop-down menu, and add it.
Your plugin will now be shown in the footer. If you have multiple shops, remember to pick the one you want to display the opening hours for. You can change shops in the Locations dropdown menu.
You may also want to add a title to your widget section, making it stand out more.
Now, in the same space on your footer, you can add another widget – your “on open” message, for instance. Repeat the above steps to place the widget in the footer.
Since the entire section already has a title, we will only input the message itself. When the shop is open, the message will be displayed.
When the shop is closed, no text will appear in the footer underneath the opening hours overview.
Here is an example of how your footer may appear to the visitor now.
Of course, you may be using Elementor, the visual page editor for WordPress. Not a problem: displaying your opening hours is even easier in Elementor.
After you install and set up the Business Hours Indicator plugin, copy the shortcode you need from the codes tab.
Then, access the page you wish to edit. Click the Edit with Elementor button.
Find the shortcode widget in your left-hand side menu (you should find it under the general heading).
Drag it to the desired location, in this case, the post main body.
Paste your shortcode in the shortcode field, and you will see it in the preview section. Remember to change the name of your shop to a location name (in this case the name we used is “Bridge_Shop“), and the plugin will draw all your configuration data for that specific location.
One you are done with that, the business hours will be displayed in Elementor’s preview screen.
Still, Elementor’s way is not the only one. WordPress’s versatility means that you can do much the same things using different page editors.
If you are using WPBakery, you still need to install and configure the Business Hours Indicator plugin to display your opening hours. Copy the shortcode you need from the codes tab.
Then, access the page you wish to edit. Click the WPBakery Page Builder button.
You should be seeing the WordPress classic mode. In order to edit with Bakery, you need to click the Backend Editor button.
Next, you want to add an element.
Since we are adding a shortcode to the page, the element you want is Raw HTML.
In the element editor, you can simply paste the shortcode you have previously copied.
You still need to change the location name to match one of the locations you have configured.
And your opening hours will be displayed.
The same goes for all of the other shortcodes. In this case, we are only showing you the business hours overview, but you may choose to use any of the plugin-provided shortcodes here.
And you are done! Now let’s see how you can use your theme’s features to display opening hours on your WordPress website.
As we have shown, there is a variety of ways to inform your visitors of your opening hours. An overview of opening hours is always useful, but you can also, say, tack on an “on open” indicator to any of your menu item pages, prompting website visitors to sample your offers immediately. Or maybe you have a clickable phone number, and would like to indicate that you will not be immediately available: easily done with an “on closed” indicator right underneath your phone number.
And even if your store is closed, a welcoming “you could be enjoying yourself here in X minutes” message might turn out to be the difference between a website visit and a real life sale.
With so many easy ways to do it, and so much potential improvement to your visitor experience, there is no reason why you shouldn’t display your opening hours on your website.