Add opening hours to your Divi site

by Kjell | August 30th, 2016 | Plugins, Tutorials | 6 comments

opening-hour-install
Some members are trying to add Opening Hours to their Divi site without much success (html table output is somehow messed up when adding the widget to your sidebar).

This plugin hasn’t been updated for a while, don’t let this stop you from using this as the author is already working on a new version which is in Beta.

This Plugin gives you the opportunity to set up your venue’s opening hours, holidays and special openings (for example Christmas days) and offers you many ways to show them to your site’s visitors.

When having activated the plugin you can set up your venue’s opening hours in a couple of seconds on an extra options-page. You can add several periods for each day, e.g. if you’re having a lunch break. Now that the Plugin knows when your venue is open and when it is closed you can chose several ways to show the Opening Hours to your customers on your WordPress’ front end.

Features :

The Opening Hours Plugin comes with several features for an easy setup and offers multiple ways to show your customers when you’re open or not. Or if you’re open at the moment.

These are the front end features :

  • Widget: Opening Hours Overview
  • Widget: Opening Hours Status
  • Widget: Opening Hours Holidays
  • Shortcode: Opening Hours Status
  • Template Tags: is_open() and is_closed()
  • Individual date and time-formats

Widgets :

Opening Hours: Overview

This Widgets lists up your Opening Hours in a table. You can set a custom title (default is “Opening Hours”) and chose wether to highlight the currently running opening period or not. So when you enable this feature and a customer visits your site on a thursday at 14:00 the opening period “Thursday: 13:00 – 18:00″ (example) would be highlighted in green.

Furthermore you can either display the days your venue is closed with a red “CLOSED” label or just drop these days from the table by toggling the option “Also show closed days”. If your prefer showing them but want to display a message different from “CLOSED” you can even change that and enter your custom closed-message.

Opening Hours: Status

The Status Widgets actually only outputs a single string, but this string is very helpful. The Widget goes through your Opening Hours and calculates whether your venue is open at the current time or not and tells that to the users who visit your site. The default strings are “We’re currently open” and “We’re currently closed” in either red or green with a small circle in front of it. If you want the widget to output your own strings you can enter them right in the widget-form and a field for the title is also provided.

Opening Hours: Holidays

This Widget lists up all the Holidays that you have set up in the Settings menu. You can give it a title and highlight currently running holidays.

Shortcode and Template Tags :

Shortcode [is-open]

The Opening Hours Status Widget is great but suffers from the placement restriction in sidebars (as well as some other Widgets). If you want to show the opening status within your post- or page-content you cannot manage that with Widgets. This is exactly what the [is-open] shortcode is good for. The shortcode returns the default messages that you know from the Widget but you can as well add your custom messages via the attributes.

Example:[is-open] – returns default messages[is-open open_message=”Visit us. Now.” closed_message=”Sorry, but we’re absent :/”] – returns either of your custom messages

Template Tags :

The two Template Tags provided with the Plugin are not much to explain. The is_open() function doesn’t get an argument and returns a bool (true/false) wether your location is currently open or not. The is_closed() function returns right the opposite. Use these when developing a theme and wanting to implement the Opening Hours Status feature.

Filter Hooks :

The Opening Hours Plugin provides loads of filters so you can customize strings, time-formats etc. right from your template’s function php or whereever. Here’s the full list of filter hooks.

  • op_holidays_widget_title
  • op_holidays_widget_name
  • op_holidays_widget_date_string
  • op_overview_widget_default_title
  • op_overview_widget_default_closed
  • op_overview_widget_title
  • op_overview_widget_weekday
  • op_overview_widget_time_string
  • op_overview_widget_closed
  • op_status_widget_default_open
  • op_status_widget_default_closed
  • op_status_widget_default_closed_holiday
  • op_status_widget_title
  • op_status_widget_output
  • op_status_widget_open
  • op_status_widget_closed
  • op_status_widget_closed_holiday
  • op_backend_stylesheet
  • op_frontend_stylesheet
  • op_textdomain
  • op_language_path
  • op_menu_title_opening_hours
  • op_min_user_capability
  • op_status_shortcode_key
  • op_status_shortcode_default_open
  • op_status_shortcode_default_closed
  • op_status_shortcode_output
  • op_status_shortcode_open
  • op_status_shortcode_closed

Let’s get started

Today I’m gonna walk you through the process of installing, configuring, and implementing the Opening Hours WordPress plugin and at the same time fix that display bug on your Divi installation. You’ll be able to add Opening Hours to your sidebar or anywhere on a page using the Widgets.

Download this plugin directly from the WordPress Plugin Directory or install the plugin from your WordPress dashboad. For the brave you can find more info about the new Beta 2.0 version, download it here

Navigate to your WordPress admin > Plugins > Add New and search for “Opening Hours” plugin in the WordPress Plugin Directory. Click “Install Now” button. After the installation of the Opening Hours plugin is completed, click on Activate Plugin. The plugin is now installed and activated.

Install plugin

After installation you can find a new menu item “Opening Hours” in your dashboard.

Plugin Activated

Here you can add your opening hours for each day. Click the green “Add Period” to add more opening hours per day. The next screenshot shows all hours filled out.

Opening Hours

Next click the “Holidays” menu item, here you can add your yearly holiday dates.

Holidays

Next menu item “Special Opening Hours”, Special Openings overwrite the Opening Hours of a certain day.

Special dates

Next Settings, set your date and time format.

Settings

Once you have all of the times configured for your opening hours, its time to add it to your WordPress site. Opening Hours comes with 4 widgets that you can add to display your hours to all customers.

To configure the widget, click on Appearance, then Widgets in your WordPress dashboard. To add the widget, drag and drop the Opening Hours Overview to your desired widget area. Here, you can define the title, highlight the current day, show the days that are closed, and even add a custom caption for days that you are closed. Once you have configured it, just click Save.

Widgets

I’m using the free Picture theme to demonstrate the display of this plugin. As you can see in the screenshot below the hours are a bit messed up 🙂 That’s because Opening Hours plugin doesn’t add any css and uses the native Divi (theme) styling.

Sidebar

All you need to do to fix this is add this css to your style.css file

.op-overview-table  th.op-overview-title,  .op-holidays-table tr.op-holiday th , .op-special-openings-table td.op-special-opening-name  {padding: 10px !important;}

.op-overview-set, .op-special-opening-time { white-space: nowrap !important;}

.op-overview-row  { border-bottom: 1px solid #eee !important;}

 
This should be the final result. Feel free to style this plugin to your own needs.

Finished

Thanks for reading all this, if you have any questions please feel free to contact me or use the comment form. Have a nice day all of you !

Instant access to ALL themes and support

Join now

CONTACT ME

Name
Email
Your message