The Business Hour widget by Atomic Addons shows your opening hours as a list of days and times. It has two styles. Static prints whatever you type for each day. Dynamic takes a start and an end time for each day, works out whether you are open at this moment in your time zone and shows an “open” or “closed” message under the list. Either style can add a header with the current time and date. This guide covers adding the widget, filling in the hours and setting up the open and closed messages.
Enable the Business Hour Widget
Business Hour is a Free widget and works with the free Atomic Addons plugin. In the plugin dashboard it is listed as Business Hours. Switch it on from there:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Business Hours. You can also open the Content category.
- 4
Turn the Business Hours widget on.
- 5
Click Save Settings.
Add the Business Hour Widget
Business Hour works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Business Hour. The widget sits in the Atomic Addons category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Layout
Open the widget and go to Content → Layout:
- 1
Style: Static, the default, or Dynamic. The sections below the Layout change with it.
- 2
Timezone: Dynamic only: the time zone the open or closed status and the clock use. Website Time, the default, follows Settings → General → Timezone in WordPress. The other choices are fixed offsets from GMT, from GMT-12 to GMT+13, and Custom.
- 3
Custom Timezone: With Custom: the offset in hours, such as
+6or-3.5. Left empty, +6 is used. - 4
Show Header: Adds a header above the list with the current time and date. Off by default.
A fixed offset doesn't change for daylight saving time. If your region has it, set your city under Settings → General → Timezone and keep Website Time.
Header
With Show Header on, Content → Header appears:
- 1
Show Current Time: On by default.
- 2
Show Current Date: On by default, in the date format set under Settings → General.
- 3
Alignment: Left, center, right or justified. Use the device icon to set it per screen size.
In the Static style, the header shows your website's time when the page loads. In the Dynamic style, the time is a live clock in the chosen time zone that ticks every second; it uses the 24-hour clock when your WordPress time format is H:i, and the 12-hour clock otherwise.
Business Days & Times
In the Static style, Content → Business Days & Times holds one item per row. It starts with Monday to Saturday at “10:00 AM - 6:00 PM” and Sunday as “Closed”. Each item has these fields:
- 1
Enter Day: The text on the left, such as a day name or “Mon – Fri”.
- 2
Enter Time: The text on the right, such as the hours or “Closed”. Leave it empty to show the day alone.
- 3
Style This Day: Sets the row apart: its day and time are bolder, on a light tint. Sunday has it on by default.
- 4
Day Color, Time Color and Background Color: With Style This Day on: colors for this row only.
The Static style shows the text as you type it and doesn't check the time, so it suits any wording: holidays, “By appointment” or split shifts.
Dynamic Days & Times
In the Dynamic style, Content → Dynamic Days & Times takes its place. It starts with Monday to Saturday at 09:00 AM to 05:00 PM and Sunday closed. Each item has these fields:
- 1
Select Day: The weekday, Monday to Sunday.
- 2
Day Level: Optional text to show in place of the day's name, such as “Mon” or the name in your language. The widget still uses Select Day to know which day the row is.
- 3
Start Time: When you open, 09:00 AM by default.
- 4
End Time: When you close, 05:00 PM by default.
- 5
Close This Day: Marks the whole day as closed. The times are hidden and the row shows the Close Level text.
- 6
Close Level: With Close This Day on: the text in place of the hours, “Closed” by default.
- 7
Style This Day: Sets the row apart: its day and time are bolder, on a light tint. Sunday has it on by default.
- 8
Day Color, Time Color and Background Color: With Style This Day on: colors for this row only.
Write the times the way a clock shows them, such as 09:00 AM and 05:00 PM, or 17:00 on a 24-hour clock. The widget compares the current time with today's start and end time: in between, it shows the open message; before or after, or on a day with Close This Day on, the closed message.
Add a row for every day of the week, closed days included. On a day that has no row, the widget shows the open message.
Additional
Content → Additional, also only in the Dynamic style, holds the messages:
- 1
Open Status: The message while you are open: “Office Open. Right now we are available for service.” by default. It is a text editor, so you can add links and formatting.
- 2
Close Status: The message while you are closed: “Office Closed. Right now we are not available.” by default.
- 3
Separator: The character between the start and end times, “-” by default.
The message appears under the list as a notice with a green edge while you are open and a red one while you are closed. Visitors can dismiss it with its × button.
The open or closed message is worked out when the page is generated. If a caching plugin serves a stored copy of the page, the message can lag behind until the cache refreshes; exclude the page from the cache or keep its cache lifetime short.
Style the Business Hour
Everything below is on the Style tab:
- Header — the header's background, padding, border and radius, and the color, text shadow, typography and spacing of the current time and date.
- General — Row Spacing (the padding of each row) and the Padding around the list.
- Divider — the line between rows, on by default: Style (solid, dotted or dashed), Color and Weight (1px by default).
- Day and Time — Days Area Width(%), separate alignment, color and typography for days and times, and Striped Effect with colors for odd and even rows.
- Separator — the color of the separator between the times.
- Message — Dynamic only: the message's color, typography, link color, background, border, radius and padding, and the space above it.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.