Get Qi Theme with 150 superbly designed WordPress demos

Get Qi Theme
Qi Theme
Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Easily Display Your Opening Hours in WordPress

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:

Premium Qi Addons

How to Configure the Business Hours Indicator Plugin

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.

Business Hours Indicator Plugin settings

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.

Select the time zone

Next, go to the hours tab. Click on the add location button to create a new shop location.

Add location button

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.

Rename the shop

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).

New options

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.

Edit hours option

Back on the hours tab, use the holidays option to set up special hours during the holidays.

Holidays option

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.

Setting the date using the menu

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.

Vacations option

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.

Indicator tab

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.

Personalize your website

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.

Time and day options

The final set of options is the opening/closing soon notification. When checked, this box opens a set of very useful options.

Opening closing soon notification

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.

Personalize these messages

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.

List opening hours for each day

The consolidated display mode conflates all the hours in consecutive days which share the same opening hours.

Consolidated display mode

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.

Table display mode

You may also want to display vacation times and holidays at all times. You can do this using the provided checkboxes.

Display vacation times and holidays

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.

Welcoming message

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.

How to Display Opening Hours in WordPress Using the Gutenberg Block Editor

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.

Shortcode block

Paste your shortcode into the block.

Paste your shortcode

Remember to change “your location name” to the location you want the hours of to appear in a post.

Your location name

To see if your opening hours have been displayed correctly, click the preview button in the upper right.

Preview opening hours

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.

Themes for All Businesses
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Brunn WordPress Theme
Brünn

Creative Agency Theme

Deston banner
Deston

Corporate Business Theme

How to Display Opening Hours in WordPress Using the Classic Editor

The first thing you need to do is install and activate the Classic Editor plugin.

Classic editor

Next, after having configured your Business Hours Indicator plugin, you need to go to its codes tab and copy the shortcode you want.

Codes tab

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.

Display your working hours as a post

Remember to edit the shop name in your shortcode (change it to your location name.).

Edit the shop name in your shortcode

You can click the preview button to see how your opening hours will appear on your website.

Click the preview button

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.

How to Display Opening Hours in Your WordPress Footer or Header

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.

Appearance widget options

The next thing you need to do is find a place for your widget. We have selected the third footer column widget area.

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.

Opening hours overview

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.

Locations dropdown menu

You may also want to add a title to your widget section, making it stand out more.

Add a title to your widget section

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.

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.

Input the message itself

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.

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.

How to Display Opening Hours in WordPress Using the Elementor Page Editor

After you install and set up the Business Hours Indicator plugin, copy the shortcode you need from the codes tab.

Codes tab

Then, access the page you wish to edit. Click the Edit with Elementor button.

Edit with Elementor

Find the shortcode widget in your left-hand side menu (you should find it under the general heading).

Find the shortcode widget

Drag it to the desired location, in this case, the post main body.

Drag it to the desired location

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.

Paste your shortcode in the shortcode field

One you are done with that, the business hours will be displayed in Elementor’s preview screen.

Business hours

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.

How to Display Opening Hours in WordPress Using the Wpbakery Page Editor

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.

Codes tab

Then, access the page you wish to edit. Click the WPBakery Page Builder button.

Edit with WPBakery Page Builder

You should be seeing the WordPress classic mode. In order to edit with Bakery, you need to click the Backend Editor button.

Backend Editor button

Next, you want to add an element.

Add an element

Since we are adding a shortcode to the page, the element you want is Raw HTML.

Raw HTML

In the element editor, you can simply paste the shortcode you have previously copied.

Simply paste the shortcode

You still need to change the location name to match one of the locations you have configured.

Change the location name

And your opening hours will be displayed.

Your opening hours

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.

In Conclusion

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.

Post your comment

Comments0