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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
We opted for a simple style that goes well with our site’s design.
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!