Opening Hours

The Opening Hours element lists the days and times a business is open and, if you want it to, tells visitors whether it is open right now. The list is plain HTML; only the current-day marker and the open or closed badge are worked out in the browser.

Adding the element

Add an element in the YOOtheme Pro builder and pick Opening Hours from the Planckie Elements group. The builder starts you with a working week, a shorter Saturday and a closed Sunday, so the shape is visible immediately.

Each row is one item: a day or a range of days, a status, and the times. The element renders as soon as it has at least one item.

Content

Option	Description
Title	An optional headline above the list, for example Opening Hours. Empty hides it — the placeholder in the field is a hint, not a default.
Items	The rows of the list.

Opening hours items

Option	Description
Day	Monday to Sunday. A row without a day does not render.
Day End	The last day of a range, for example Friday for Monday – Friday. (single day) leaves the row on one day, and a range may wrap around the end of the week, such as Saturday to Tuesday.
Status	Open with times, or Closed, 24 Hours or By Appointment, which show a label instead.
Opens / Closes	The times, as hours and minutes. 9, 9:00, 9.00 and 9 00 are all read correctly.
AM/PM	One per time. — (24h) displays the time in 24-hour form; AM or PM switches that time to 12-hour form.
Custom Label	Replaces the status label on this row alone, for example Closed for renovation. Shown for rows without times.
Note	A line under the row, for example Kitchen closes at 22:00.

A closing time earlier than the opening time is read as closing after midnight, so 20:00 to 02:00 keeps the business open past midnight and the element knows it.

Several rows may cover the same day. Split shifts — Monday to Friday 9:00 – 12:00 and Monday to Friday 13:00 – 17:00 — are two rows, and both are taken into account for the open or closed status.

Settings

Title

Option	Description
Style	A heading or text style of the active theme style, from Heading 3X-Large down to Text Small.
Outline text	Draws the title as an outline instead of filled type.
Decoration	A divider, a bullet or a line vertically centered to the heading.
Font Family	Default, Primary, Secondary or Tertiary, where the style has more than one.
Color	Muted, Emphasis, Primary, Secondary, Success, Warning, Danger or Background.
Title Element	h1 to h6, or div. h3 by default.

The group is only active while the Title field has text.

Display

Option	Description
Mode	Static lists the hours and nothing else. Dynamic (Open/Closed status), the default, additionally marks the current day and works out whether you are open right now.
Timezone	An IANA name such as Europe/London, or a fixed offset such as +01:00. Empty uses the timezone configured for the website, and an unknown value falls back to it as well. Dynamic mode only.
Day Name Format	Long (Monday), Short (Mon) or Narrow (M).
Time Separator	– (dash), to or - (hyphen), placed between the two times.
Today	Bold text for today marks the current row. Dynamic mode only.

The timezone is the business's, not the visitor's: someone reading the page in Tokyo sees the same open or closed answer as someone across the street.

Status Badge

The whole group appears in dynamic mode only.

Option	Description
Position	Above list, Below list or None. Above by default.
Style	Alert, a full-width bar; Pill, a rounded tag; or Dot + Text, a coloured dot and the label alone.
Open Label	Left empty, it reads Open now.
Closed Label	Left empty, it reads Closed.
Closing Time	Show the closing time in the badge appends today's closing time while you are open.
Closing Time Label	Introduces that time. Left empty, it reads closes at, giving Open now · closes at 17:00.

The badge takes the success and danger colors of the active theme style for its dot and its tint.

Row Labels

Option	Description
Closed	The text for rows without hours. Left empty, it reads Closed.
24 Hours	Left empty, it reads Open 24 hours.
By Appointment	Left empty, it reads By appointment.

These are the defaults for every row of that status; a single row overrides them with its own Custom Label.

Panel and List

Panel holds Style — the card and tile variants of the active theme style, or a blank panel — and Padding, which is active once a panel style is set.

List holds Style (Divider, Striped or none), Size (the padding between rows, Default, Large or None) and Text Style (Text Meta, Text Lead, Text Small or Text Large).

Accessibility

Option	Description
ARIA Label	Names the list for assistive technology. Left empty, it reads the title, or Opening hours when there is none.

General and Advanced

The General group and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.

Styling

The element exposes these classes to Custom CSS, alongside .el-element:

.pe-opening-hours, .pe-opening-hours-title, .pe-opening-hours-list, .pe-opening-hours-item, .pe-opening-hours-today, .pe-opening-hours-day, .pe-opening-hours-time, .pe-opening-hours-note, .pe-opening-hours-status, .pe-opening-hours-status-open, .pe-opening-hours-status-closed

.pe-opening-hours-today is added to the current row, and the badge carries .pe-opening-hours-status-open or .pe-opening-hours-status-closed depending on the answer — the two hooks for giving the states a look of your own. The element defines no CSS custom properties.

Accessibility and reduced motion

The list is a labelled ul, and each row is one list item holding the day, the time and any note, so a screen reader reads Monday – Friday, 09:00 – 17:00 as one entry.

The current day carries aria-current="date" whether or not you switch the bold highlight on, so the marker survives for people who do not see the styling. The badge is a role="status" region, which means a screen reader announces it when it appears without stealing focus from whatever the visitor was doing.

Nothing here moves, so there is no animation to reduce.

Notes and limits

• The rows are in the page source; the badge and the current-day marker are not. Without JavaScript the list is complete and correct, and the open or closed answer is simply absent.
• Day names come from the plugin's own translation catalogue, so they are already in your language in the page source. The browser then relabels them from the lang attribute of the document, which also covers languages the catalogue does not ship yet. The narrow format is the first letter of the day name in that language.
• The badge refreshes on the minute, and stops refreshing while the browser tab is in the background, catching up as soon as the visitor comes back.
• Rows with the status Closed, 24 Hours or By Appointment are labels. Only 24 Hours counts as open; by appointment is treated as closed, since it is not walk-in time.
• When several rows cover today, the first of them gets the current-day marker, while the open or closed answer looks at all of them.
• Holidays and one-off closures are not part of the element yet. A row is a weekly pattern, so for now an exception needs a note on the affected row, a row with a Custom Label, or a second element. Exception days are planned.