< All Topics

Business Hours

The Business Hours Block is a free Gutenberg block lets you display your working hours in a clear and professional way. You can add weekdays, dates, and time ranges with full customization for colors, typography, and layout. This block makes it easy for visitors to know when your business is open and improves engagement.

Adding the block

To add the Business Hours block:

Block settings

General business hours

  • Business Hour Item – Add a day and its corresponding time (e.g., Saturday – 9am to 2pm).
  • Add New Item – Click this button to add multiple days and hours as needed.

Day settings

  • Day (Normal / Hover) – Define the day’s text style for both normal and hover states.
  • Day Text Color – Pick a color for the day label.
  • Typography – Customize size, letter spacing, font appearance, decoration (underline, strike, etc.), letter case, and line height.

Time settings

  • Normal / Hover – Customize how the time text looks in its default state (Normal) and when a visitor hovers over it (Hover).
  • Time Text Color – Choose the color of the time text.
  • Typography – Adjust the appearance of the time text with:
    • Size – Set the font size (in px).
    • Letter Spacing – Control spacing between each character.
    • Appearance – Select font weight/style (e.g., regular, bold).
    • Decoration – Add underline, overline, or strikethrough.
    • Letter Case – Change text format (uppercase, lowercase, capitalize).
    • Line Height – Set the vertical space between lines of text for better readability.

Hour item settings

  • Hour Items Background – Choose background styling for:
    • All Items
    • Even Items
    • Odd Items
  • Hour Item Dimensions – Adjust padding and margin.
  • Hour Item Border – Define border thickness (in px).

Block styling

  • Block Background – Select between Color or Gradient.
  • Block Dimensions – Set padding and margin for the overall block layout.