EB Business Hours helps you clearly display your business’s operating hours to your visitors. It makes it super easy to display your days and times in a clean, customizable way, perfect for contact pages, footers or location sections. 

Learn how to create a dynamic and visually appealing business hours section on your website using the Business Hours block from Essential Blocks in Gutenberg.

How to Activate the EB Business Hours Block? #

To activate the Business Hours, navigate to Essential Blocks → Blocks. Then, from the Content Blocks section, toggle to enable the block as shown below. 

Note: Business Hours is a premium block. To use this, you will need to install and activate the Essential Blocks PRO plugin on your website along with the free version.

How to Configure the Business Hours in Gutenberg? #

Open the page or post where you want to display your operating hours, then add the EB Business Hours block to that section. Search for the ‘Business Hours’ block and insert it into the desired section. 

After inserting, you will get two options: ‘Choose’ or ‘Start blank’. Select ‘Start Blank‘ if you want to create the business hours according to your preferences.

If you click on ‘Choose’, you will find premade templates for the Business Hours. There, you will have the option to choose from three different presets: Preset 1, Preset 2 and Preset 3. 

Preset 1: Clean & Highlighted  #

With this preset, you get a simple, modern layout where days and times are clearly aligned. You’ll see the current day highlighted in a green accent and closed days show a red “Closed” label. A minimal header displays “Open Until [time]”, making it perfect if you want a straightforward, easy-to-read schedule for your restaurant, café or shop. 

This preset works especially well if your website favors a light or minimal style.

Preset 2: Classic & Compact #

This preset gives you a more professional, sleek look with a dark header and a clock icon, along with subtle icons beside each day. The “Today” and “Closed” states remain visible but understated. 

It’s ideal for corporate, service-based, or agency websites, particularly those with dark or neutral themes, helping your schedule appear polished and organized.

Preset 3: Visual & Highlighted #

Here, you can add an optional image or icon at the top for branding or visual appeal. “Today” is highlighted in bold green, and dotted dividers improve readability. Closed days are grouped or marked in red for quick identification. 

This preset is perfect if you want your creative, hospitality or local business site to make its Business Hours section stand out visually, giving your site a more branded and engaging layout.

Whether you start with a blank template, you can design the EB Business Hours block to match your preferences. When you choose Start Blank or a template, the basic structure is automatically generated and Preset 1 is inserted as the default business hours.

However, if you want to fine-tune the layout or enhance the design, you can customize each part’s structure for the following options.

General  #

From the Gutenberg right sidebar, go to the Block settings. Under the General tab, you’ll find several options:  Settings, Dynamic Settings, Layout, Business Hours and Exception Dates (Holidays). Each section offers customizable styling and configuration options.

Settings: Here, you can adjust the Timezone, Time Format, toggle to Show Closed Days, edit the Closed Text and modify the Time Separator.

Dynamic Settings: You can toggle the Open/Closed Badge, choose a Media Type (icon, image, or none) and customize the Heading, Open Badge Text, and Closed Badge Text. 

You can also enable Highlight Current Day to automatically highlight the current day based on your selected timezone.

Layout: In this section, you can toggle Icon per Row and Row Separator, choose a Separator Type from the dropdown and enable Zebra Rows for better readability.

Business Hours: You can fully customize your business hours here: drag, edit and adjust them to fit your schedule.

Exception Dates (Holidays): Toggle this option to display exception dates or holidays and customize them as needed.

Advanced  #

In the Advanced tab, you can easily access and customize a wide range of options to fine-tune your block’s appearance and behavior. 

This includes Visibility Options, Margin & Padding, Background, Border & Shadow, Liquid Glass Effect, Responsive Control, Animation, Interactive Animation and Conditional Display. 

The Advanced Styling Panel allows you to fine-tune the appearance and behavior of individual elements with precision. 

• Visibility Options: Control when and where elements appear, often based on user roles or device types. 
• Margin & Padding: Adjust spacing on all four sides using px, em or %. 
• Responsive Control: Tailor design for mobile, tablet, and desktop.
• Background: Add colors, gradients, images, borders or shadows for depth and visual interest.
• Animation: Apply entrance effects or transitions for more engaging layouts.
• Conditional Display: Show or hide elements based on conditions (visible on frontend, not in editor).
• Custom CSS: Add custom styling rules for full design flexibility.

Once you’re done customizing, click Update or Publish at the top and preview your changes. Great job, you’ve just created a dynamic Business Hours block.

Final Outcome #

By following this guide, you’ve learned how to add Business Hours to your WordPress website. With the Essential Blocks plugin, you can seamlessly insert the Business Hours block with a professional look. 

Getting stuck? Feel free to Contact Our Support for further assistance.