Skip Navigation
WordPress Help Centre
20 Related Support Articles

All-In-One WP Business Hours

Time format cheatsheet

Use this cheatsheet for custom time format:

Jan 19, 22

Upgrading your custom style from v1.2.0 to v1.3.0

There was a minor styling update in version 1.3.0 that could cause issues if you have used custom style generator for version 1.2.0.

There is now a new class .bhr-content-layout which wraps the entire content. If you noticed your styles are different after updating to version 1.3.0 you can simply replace bhr-wrapper with bhr-content-layout in your custom style and everything should work as expected.

Here is a basic HTML structure of the data:

<div id="bhr-post-X" class="bhr-wrapper">
    <div class="bhr-content-layout">
        <div class="bhr-header-wrapper"></div>
        <div id="list-hours-X" class="list-hours"></div>
    </div>
</div>
Jan 05, 22

How to add countdown timer for opening hours?

If you want to display countdown timer for opening hours, please follow the following steps:

Enable the countdown in frontend by checking the Open Countdown option in the Views tab:

Modify the countdown message

To modify the default message, go to Messages and in the Open countdown section, update the message.

There is a [time] parameter that can be used to output the time.

Defualt message is We are opening in [time]. Please check back later.

Modify the countdown time format

To modify the time format, go to Layouts and update Countdown time format option. Defualt format is HH[h]:mm[m]:ss[s]

Jan 05, 22

How to choose number of days for upcoming holidays?

Since version 1.3.0 you are now able to choose number of days for upcoming holidays.

In the Layouts tab, you can select the number of days from today to show upcoming holidays. Default is to show holidays which are within the next 7 days.

Jan 05, 22

How to add an image as background for the header?

If you want to add a background image for the header, you can use something like this (from the demo page)

#bhr-post-500 .bhr-header-wrapper {
    background-image: url('UR-IMAGE-URL');
    background-size: cover;
    height: 240px;
    background-position: center;
    box-shadow: rgba(0, 0, 0, .5) 0 0 0 100vw inset;
}

Where 500 in #bhr-post-500 is the ID of the business hours set, you can obtain that from the shortcode.

Dec 06, 21

How to add a holiday with different name showing up on the site?

If you want to have multiple holidays and want to be able to select the correct holiday in business hours, you can take advantage of Custom Holiday Name option when adding holidays.

When adding a holiday, make sure to set a custom holiday name, this will be shown on the website.

This way, the original name will show on the WordPress when editing business hours.

And the new name you added will only show on the website:

Dec 03, 21

How to display holidays after regular hours?

By default, holidays are displayed before regular hours. You can choose to display the holidays after regular hours by going to Layouts tab and select the location of the holidays.

Visit your website and you should see the holidays showing up after regular hours:

Dec 03, 21

How to display upcoming holidays?

Since version 1.2.0 there is a new option added to Views where you can display upcoming holidays.

Visit your website and you should see the upcoming holidays - holidays which are within the next 7 days.

Dec 03, 21

How to add All-In-One WP Business Hours using Elementor?

You can easily add All-In-One WP Business Hours using any page builder plugin, simply use the shortcode provided in the styles tab.

In Elementor, search for "Shortcode" widget and add the shortcode provided in the styles tab (ex: [business-hr id="63"])

You have to click on "Preview Changes" to be able to view business hours.

Nov 18, 21

How to display hours as open all day?

If you want to mark a day as open all day, first set the status to open 24 hrs and then set the start hour to 00:00:00 and end time to 23:59:00

This way that day will be marked as open 24 hour. You can set the custom message in the message tab.

Nov 01, 21

How to display hours in 12hr or 24hr format?

Currently the hours are set automatically based on the local time zone. It is planned to allow the option to choose 12hr or 24hr format in future.

Oct 14, 21

How to use the style generator to create unique layouts?

I have created a Style Generator for All-In-One WP Business Hours which can be viewed here: https://help.mywpdev.com/style-gen/

Currently there are some sample data loaded but in future you will be able to load your own data and see the live updates based on your own business hours.

Feel free to explore the style generator and create your own unique styles!

How to add custom style to your site?

Once you are done customizing the layout, enter the ID of business hours set which can be obtained from the shortcode in the Style tab. For example [business-hr id="12"] and then click on generate style.

Copy the entire content of the textarea box and paste it in your theme. you can also take a look at this: https://help.mywpdev.com/article/how-to-add-custom-css-to-wordpress/

Oct 12, 21

How to add lunch hours?

Are you taking lunch break and your business is closed? Adding breaks between opening hours are very easy. Simply mark the hour as closed and enter a custom message.

The hours are shown as below:

Oct 12, 21

How to add holidays?

In order to add holidays, go to Business Hours > Holidays and add a new holiday.

When adding a holiday, you have to set the start and end date. If your business is closed for the entire day during these dates, set Closed During These Period to Yes.

Otherwise, you can select No and you will be able to add custom opening hours for these dates.

How to add a holiday to set of business hours

Once you added a holiday, head to Business Hours > Business Hours and select the holiday you added under Holidays.

Oct 12, 21

How to display location info?

To display location info, first add a location with desired info (check help centre on how to add a location). Then head to Views tab and check Display location information.

The info will show up below the hours:

Display Google Map

You also have the option to display Google Map. Simply select Display Google map on the View tab and a Google Map will be displayed below location info.

Jul 29, 21

All-In-One WP Business Hours Documentation

Plugin Installation

To install the plugin, first, download the zip file from CodeCanyon and head to Plugins > Add New and upload the zip file. You can read more about plugin installation here:

https://help.mywpdev.com/article/how-to-install-wordpress-plugins/

Once you successfully installed the plugin, activate the plugin.

Add Business Hours

If you correctly installed All-In-One WP Business Hours, you should see a menu added to your dashboard.

Click Add New to add a new set of business hours. Enter a title for your business hours and follow the following configuration steps:

General

In the general section, you can set the time zone, language, locations, and holidays. If you don't see any locations or holidays don't worry, we will add them later.

  • Since we are adding CN Tower hours, we selected Canada/Eastern time zone.
  • The time zones are pre-field and do not depend on WordPress time zone.
  • Select a language to display the hours, days, month names, and other related words in that particular language.

Messages

Certain messages when displaying business hours can be customized here.

Hours

In this section, you can add multiple hours for every day of the week, mark that day as closed all day, or mark it as open 24-hrs.

Make sure to visit the help centre to view all related questions about hours https://help.mywpdev.com/article/tag/all-in-one-wp-business-hours/

Views

In the view section, you can decide to hide or show location info, shorten weekdays, group days with the same opening and closing hours, and display schema markup.

Styles

In this section, you can copy the shortcode and display business hours in pages, posts, and other areas of your website. You can also find the link to the online style generator to customize and copy the custom css code. Make sure you hit the publish button first, then you should see the shortcode.

Make sure to visit the help centre to view all related questions about the All-In-One WP Business Hours plugin https://help.mywpdev.com/article/tag/all-in-one-wp-business-hours/

Jul 28, 21

How to mark a day as closed all day?

If your business is closed for the entire day, for example all Tuesdays, make sure you set the Status in Hours section to Closed.

You can customize Closed All Day message in the Message section:

Jul 28, 21

How to use the shortcode to display business hours?

Once you published your business hours data, go to the Styles tab and copy the shortcode. The shortcode looks like this:

[business-hr id="5"]

Copy that and paste it into pages or posts.

Using shortcode in PHP files

If you want to call the shortcode in your theme file, you can use the built in do_shortcode function:

<?php echo do_shortcode('[business-hr id="5"]'); ?>
Jul 28, 21
© 2022 by WordPress Help Centre. All rights reserved.