Use the Worker Elementor widget to add business hours

The Worker(called “Business Hours” in the Selection pack) is a business hours widget for the Elementor Builder. The widget displays the schedule of the company in real-time, shows the current status (open or closed), and also shows information about the holidays. All this can be flexibly configured directly from the Elementor’s interface and does not require additional code knowledge.

For further work, you need the Elementor to be installed on your site. You can download from wordpress.org

Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content Tab

On the Content tab of the Worker Elementor widget, you can manage everything related to the content of the page, change the contents of the section, description, and more.

Header content

This section contains settings related to the contents of the widget header:

Content-Type

Nothing

In the “nothing” mode, the header will retain its size but will not have content.

Current Date

Displays the {time} and (or) {date} in the format that you set in the General WordPress settings. Use curled brackets to display date/time values and HTML tags to set the style and size of the text. Below you see one example for this setting:

<h2 data-size="large">{time}</h2>
<span data-size="small">{date}</span>

this entry looks something like this:

Worker widget header example
Worker widget header example

To prevent caching of date and time data add non-cache classes for date and time tag:

<h2 class="non-cache-time">{time}</h2>
<span class="non-cache-time">{date}</span>
Current Status

When choosing to display the current status, it is possible to set the text for two types of messages:

  • Open Message
  • Closed Message

Depending on the working hours, these messages will alternate.

Icon

This setting sets any icon using the standard Elementor picker for Icons.

Image

This setting sets any pictures using the standard Elementor image manager.

Custom Message

This setting displays any custom message regardless of business hours. You can use HTML markup inside this setting.

Position

This setting sets the location of the content of the header relative to the header:

  • Top Left
  • Top Center
  • Top Right
  • Center Left
  • Center Center
  • Center Right
  • Bottom Left
  • Bottom Center
  • Bottom Right

Business Hours

In the working hour’s section, you can configure the work schedule for each day of the week. For each day, it is possible to set several options:

Day label

The widget is configured with default names for each day. But, you can change the name of any day in the week.

Closed All Day

This setting turns on the non-working day of any day of the week. After selecting this setting, you can set a text message that will be displayed when this mode is activated.

Open 24 Hours

This toggle turns on the operation 24 hours a day. After selecting this setting, you can set a text message that will be displayed when this mode is activated.

Business Hours

The widget allows you to adjust the working time very flexible. It is possible to choose any time interval with an accuracy of up to one minute. Besides, you can create several time intervals in one day.

Business hours in the Worker
Business hours in the Worker

Holidays and Special Days

You can set up special workdays for the whole year. For such days, a special holiday message will be shown.

Holidays
Holidays

Hold the shift and click on the day to select several days in the calendar.

Recurring

Activate the switch for repeating holidays if you want holidays to be repeated from year to year.

Footer content

This section contains settings related to the contents of the widget footer:

Content-Type

In the “nothing” mode, the widget footer will retain its size but will not have content.

Displays the {time} and (or) {date} in the format that you set in the General WordPress settings. Use curled brackets to display date/time values and HTML tags to set the style and size of the text. See one of the examples below:

<h2 data-size="large">{time}</h2>
<span data-size="small">{date}</span>

this entry looks something like this:

Worker widget header example
Worker footer example

When choosing to display the current status, it is possible to set the text for two types of messages:

  • Open Message
  • Closed Message

Depending on the working hours, these messages will alternate.

This setting sets any Font Awesome icon using the standard Elementor picker for Icons.

This setting sets any pictures using the standard Elementor image manager.

This setting displays any custom message regardless of business hours. You can use HTML markup inside this setting.

Position

This setting sets the location of the content of the footer relative to the header:

  • Top Left
  • Top Center
  • Top Right
  • Center Left
  • Center Center
  • Center Right
  • Bottom Left
  • Bottom Center
  • Bottom Right

Style Tab

On the styles tab, you can configure everything related to the visual style of elements: colors, backgrounds, gradients, padding, margins, borders, and more.

Header

The header section includes settings regarding header styles and elements within the header.

Show header

This setting enables or disables the display of the widget header and all header settings.

Height

This setting sets the height of the widget header. Please note that the height can be adjusted so that there is less content.

Padding

This setting sets the paddings inside the header.

Padding settings in the Worker
Padding settings in the Worker

Please note that this setting does not control the header height. To change the block height, use the Height setting.

Border radius

This setting is set the border-radius for the header section.

Background type

This setting changes the background color of the header. You can choose a color, gradient, or background image.

Text Color

Changes font color settings. The font color of your theme will choose by default.

Typography

This group of settings controls everything about typography: font-size, font-weight, and other parameters.

Typography settings in the Worker
Typography settings in the Worker

Text shadow

This setting creates a shadow from the text.

Business Hours

The business hours section includes settings regarding styles and elements within the core section of the widget.

Show business hours

This setting enables or disables the display of the business hours’ section.

Margin

This setting sets the margin for the business hours section.

Padding

This setting sets the paddings inside the business hours section.

Worker Elementor widget - Padding settings in the Worker
Padding settings in the Worker

Border radius

This setting is set the border-radius for the business hours section.

Background type

This setting changes the background color of the business hours section. You can choose a color, gradient, or background image.

Text Color

Changes font color settings. The font color of your theme will choose by default.

Typography

This group of settings controls everything about typography: font-size, font-weight, and other parameters.

Worker Elementor widget - Typography settings in the Worker
Typography settings in the Worker

Text shadow

This setting creates a shadow from the text.

Space between

This setting changes the distance between each day.

Footer

The footer section includes settings regarding footer styles and elements within the footer.

Show Footer

This setting enables or disables the display of the widget footer and all footer settings.

Height

This setting sets the height of the widget footer. Please note that the height can be adjusted so that there is less content.

Padding

This setting sets the paddings inside the footer.

Worker Elementor widget - Padding settings in the Worker
Padding settings in the Worker

Please note that this setting does not control the footer height. To change the block height, use the Height setting.

Border radius

This setting is set the border-radius for the footer section.

Background type

This setting changes the background color of the footer. You can choose a color, gradient, or background image.

Text Color

Changes font color settings. The font color of your theme will choose by default.

Typography

This group of settings controls everything about typography: font-size, font-weight, and other parameters.

Worker Elementor widget - Typography settings in the Worker
Typography settings in the Worker

Text shadow

This setting creates a shadow from the text.

Advanced Tab

The settings in the advanced tab Worker Elementor widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor
Update page in the Elementor

Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.

Was this article helpful to you?