A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Add Opening Hours in WordPress

How to Add Opening Hours in WordPress – the Easiest Way

When you are running a business either online or offline, your customers are eager to ask you many questions and one of them shouldn’t be about your opening hours. Why so? Because this is a piece of basic information that should always be clearly stated on your website, plus adding opening hours in WordPress is no rocket science. Why would you waste time talking to your customers about your working hours when you can have this piece of info displayed on your website for everyone to see and know?

If you think adding opening hours in WordPress is a complicated procedure that requires expert knowledge, you couldn’t be more wrong. With a tool like Qi Addons for Elementor, you can add a stylish opening hours widget to your website in just a few clicks.

Adding Opening Hours in WordPress with Qi Addons for Elementor

Qi Addons for Elementor is an intuitive, user-friendly tool that comes with amazing design and adds a touch of beauty besides functionality to your website. It is very versatile and powerful at the same time. It includes the largest collection of free add-ons currently on the web – 60 free widgets make it easy even for complete newbies to improve their websites with useful elements without a line of code. Also, there are 40+ premium widgets for creating even more amazing elements.

Qi Addons for Elementor provides you with all the features necessary for presenting every single element of your business effectively and with style. You can choose between creative, graphic, typography, Woocommerce, SEO, showcase, and many more addons to enrich your website with. Plus, you can be sure it is compatible with all WordPress themes.

To use it, you only have to make sure the Elementor page builder is activated on your website. It is easy to install and use and requires no special configuration to start with.

Install Qi addons for Elementor

After you install the plugin, go to the page where you want to add the opening hours widget on. Make sure to switch to Elementor editor once you are on the selected page. When you’ve got this settled, type working hours in the left-hand menu search field to find the widget.

Working hours

To add the widget on the page, simply drag and drop it to the desired place on the page. The widget will match your website style in terms of typography by default, but you can customize it further if you find that necessary or simply want to change something.

Add Opening Hours in WordPress

Customizing the Content of the Widget

Now, let’s see how we can customize the widget. First, we are going to adjust its content. The settings needed for that are listed in the General tab menu. You can add your own subtitle and title, as well as text to the opening hours widget. You simply enter the subtitle and title into the designated fields. You can easily change the font and color and add special signs into the text section in the widget.

Customizing the Content of the Widget

To change the working hours, scroll down and you will see the Menu Items settings. This is where you enter your working hours. By default, there will be five items to customize, but you can add or remove any if you need to. Simply click on the item to open its settings and make the adjustments.

Menu Items settings

As you can see from our example, it is possible to add an icon to the working hours’ items menu. You can simply upload an icon from your icon library. You can also change the font color here or go for the global color settings as this is the safest option that ensures the item matches your site’s style.

These are all the basic settings in terms of the widget’s content. As you scroll down you will notice a few more tabs, we encourage you to explore the options they offer as all the changes are immediately visible and you can easily undo them in case you don’t like what you did.

Explore the options

Adjusting the Widget’s Style

Now, we can continue to style the widget. You will first see the styling options for items in the widget (working days and hours). In case you choose to have icons, here is where you adjust their size and color. Options for changing the color and typography of the items follow below.

Adjusting the Widgets Style

You can also set the line between the days and hours to be in different styles. You can choose between dotted, doubled, dashed, solid, or groove style and also decide whether you want the line to be in between or to underline the days and hours, or you may choose not to have it at all.

Set the line between the days and hours

It is also possible to change the widget’s background color. As you scroll down, the next tab in the left-hand menu is General Style where you can choose background color, and even add an image or video as a background.

Change the widgets background color

In case you want to change anything regarding any piece of the text content in the widget, you don’t have to go back to each part of it, you can make all the adjustments by clicking on the Text Style tab.

Text Style tab

The same goes for spacing between text. In case you want to change it, don’t go back just scroll down to the Spacing Style tab and see what suits you. Just move the slider left and right and look at how the changes take effect in real-time so you can immediately decide what works for you.

Spacing Style tab Opening hours

In the Advanced Tab, you will find many options to finetune the look of this widget. You can set the positioning more precisely, borders and background, and many other parameters.

Add Opening Hours Advanced options

We opted for a simple style that goes well with our site’s design.

Opening Hours in WordPress Example

In Conclusion

There are so many options that it is impossible to cover them all in a single tutorial. Feel free to explore and test even the options we didn’t get to mention in this article. You simply can’t make a mistake, Qi Addons is very easy to use and provides you with full control over the content and style of the widget.

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply