{"id":8421,"date":"2020-06-16T15:00:51","date_gmt":"2020-06-16T13:00:51","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8421"},"modified":"2022-11-22T12:22:04","modified_gmt":"2022-11-22T11:22:04","slug":"how-to-display-opening-hours-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-display-opening-hours-in-wordpress\/","title":{"rendered":"How to Easily Display Your Opening Hours in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Most will agree that, when running a business, you need to make it clear to your customers when you\u2019re there for them and when not \u2013 and this is why it\u2019s important to prominently display your opening hours in WordPress.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This may be more common for, or expected of, brick-and-mortar shops, but even online services might not be available 24\/7. Posting your opening hours on your website makes it easier for your visitors \u2013 and prospective customers \u2013 to plan visits to your stores, to book appointments, tickets or tables, or make calls to your support staff. They will also know when they can expect a customer service representative to return their call \u2013 especially useful if your customers are in a different time zone.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With opening hours prominent on your website, you can show your customers how punctual and professional you are. By proving that you value their time, you will make them value your services even more. This is why there are a lot of business-oriented <a href=\"https:\/\/qodeinteractive.com\/theme-shortcode\/working-hours-wordpress-themes\/\">WordPress themes with a built-in working hours shortcode<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But in case your theme doesn\u2019t come with built-in opening hours, in this article, we will show you several ways to display them on your site. Here\u2019s what we\u2019ll cover:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#display-open-hours-using-qi-addons-for-elementor\">How to Display Open Hours Using the Qi Addons for Elementor Working Hours Widget<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#display-open-hours-using-qi-blocks-for-gutenberg\">How to Display Open Hours Using the Qi Blocks for Gutenberg Working Hours Block<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#display-open-hours-using-business-hours-indicator-plugin\">How to Display Open Hours Using the Business Hours Indicator Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;81px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"display-open-hours-using-qi-addons-for-elementor\"><\/a>How to Display Open Hours Using the Qi Addons for Elementor Working Hours Widget<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"496\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-768x393.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-620x317.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019re using the Elementor website builder for WordPress, you\u2019re in luck \u2013 we have our very own <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> plugin to help you do great things such as adding the working hours on your website. It\u2019s not all you can do with the plugin, of course. The full, premium, version of the plugin has over a hundred different add-ons that cover everything from image presentation to building charts and graphs.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The widget you\u2019ll need to show the open hours on your WordPress website is the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/working-hours\/\" target=\"_blank\" rel=\"noopener\">Working Hours widget<\/a>. It\u2019s one of the widgets included with the free version of <a href=\"https:\/\/wordpress.org\/plugins\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a>, and you can use it with the free version of <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a>, too. So why don\u2019t you go ahead and download and install both those plugins, and we\u2019ll show you how to create one of the examples from the widget\u2019s page.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Setting the Widget Content<\/h3>\n<p>[\/vc_column_text][vc_column_text]After installing Qi Addons and Elementor, you can go ahead to any page or post you want to, open it in Elementor, and search for the Working Hours widget. <strong>We\u2019ve prepared the area to include two columns, so we started by dragging the widget to the one on the left.<\/strong> You should do the same.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You\u2019ll notice that the widget has a lot of sample content and that the options menu is open to the General content option.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"520\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Default.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Elementor Default\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Default.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Default-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Default-768x412.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Default-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The general content options you can set up here include pretty much everything that you see in the widget. The subtitle, title, text, separator enabler, and menu item options are all there. In the menu item options, you\u2019ll be able to set icons, and add the name of the day, and the hours.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We added the content we prepared for the example, including the subtitle, the title, and the text.<\/strong> We removed two of the items and edited the contents of the remaining three.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"391\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Content-Added.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Elementor Content Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Content-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Content-Added-300x121.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Content-Added-768x310.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Content-Added-620x250.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Because we didn\u2019t choose to use the separator, the remaining content options weren\u2019t of interest to us, so we moved on to styling our working hours display.<\/strong> If you choose to use the separator, you\u2019ll be able to choose its type and position, and later set the icon or image if you choose to use any.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling the Widget<\/h3>\n<p>[\/vc_column_text][vc_column_text]Once you switch to the Style options, head straight over to the General Style option \u2013 that\u2019s where you can change the background color of the widget. It\u2019s not all you can do there, of course \u2013 you can set the type of the background, add an image to it, and pick the type of border, its width, and color.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We used the Classic background type and set its color to #072c8d before moving on to Item Style options.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1466\" height=\"640\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Color.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Elementor Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Color.jpg 1466w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Color-300x131.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Color-1024x447.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Color-768x335.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Color-1240x541.jpg 1240w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Color-970x423.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Color-620x271.jpg 620w\" sizes=\"auto, (max-width: 1466px) 100vw, 1466px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Item Style options are where you fine-tune everything there is about the items on your open hours list. You can set the icon color and size, change the color and typography options for days and hours, as well as adjust line and border type.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We made a couple of adjustments to the Item Style options. <strong>We\u2019ve set the icon color to #ffffff, and its size to 15px.<\/strong> We set the same color for the day and hour letters, too. <strong>In the Hours Typography options, we set the size to 18px and the weight to 500.<\/strong> We chose the \u201cbetween\u201d for our line type, set the border type as dashed, its width to 1 pixel all around, and the color to #ffffff80.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the final touch, we switched back to Content options and made a slight change to our third item, the one that shows Sunday open hours. <strong>We switched its color to #ffffff80.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"465\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Style-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Elementor Style Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Style-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Style-Settings-300x144.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Style-Settings-768x369.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Style-Settings-620x298.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to Text Style options \u2013 the section where you can choose the color, typography, and tags for the title and subtitle, as well as the color, typography, and underline options for the text.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We switched the title tag to H3 and its color to #ffffff.<\/strong> We chose H5 for the subtitle tag, #ffffff for its color, and 17px for its size in the Subtitle Typography options. <strong>We again chose #ffffff for text color and set 500 for its weight in the Text Typography options.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"472\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Text-Style.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Elementor Text Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Text-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Text-Style-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Text-Style-768x374.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Text-Style-620x302.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The following two sections, Separator Style and Separator Icon Style are where you can style the separator and its icon if you\u2019re using them. <strong>We didn\u2019t, so we skipped straight ahead to the Spacing Style options.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The Spacing Style options allow you to set spacing, paddings, and margins for the widget. You can choose how much space there is between the items, how much padding there is in the item holder, or the bottom margins for titles and subtitles.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We chose 23px for our spacing between items. <strong>We unlinked the holder padding values and set them, starting with the leftmost, to 63px, 60px, 63px, and 60px.<\/strong> We set 29px for the bottom title margin, and 32px for the top text margin.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"456\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Spacing-Style.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Elementor Spacing Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Spacing-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Spacing-Style-300x141.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Spacing-Style-768x361.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-Spacing-Style-620x292.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With that, we\u2019ve finished one-half of our open hours display. For the other half, right-clicking and duplicating the widget we\u2019ve already made is a great way to kickstart its creation.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The changes we\u2019ve made with the second widget include <strong>setting the color of the third item to #e35521, the background color to #fbf6eb, and the colors for the icon, day, hours, as well as the title, subtitle, and text, to #1e1e1e<\/strong>. For Line type, we set the color to #1e1e1e23.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"423\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-2nd-Column.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Elementor 2nd Column\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-2nd-Column.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-2nd-Column-300x131.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-2nd-Column-768x335.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Elementor-2nd-Column-620x271.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If your open hours table doesn\u2019t look exactly like this, don\u2019t worry. Depending on the theme you\u2019re using and its settings, your results might differ slightly. You should feel free to experiment with the setting and create the open hours display that suits your website the best.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"display-open-hours-using-qi-blocks-for-gutenberg\"><\/a>How to Display Open Hours Using the Qi Blocks for Gutenberg Working Hours Block<\/h2>\n<p>[\/vc_column_text][vc_column_text]WordPress\u2019 Gutenberg editor is a powerful block-based tool you can use to create all sorts of pages for your website. In case it\u2019s your preferred page builder and you want to use it to display your business\u2019 open hours somewhere on your website, <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener\">Qi Blocks for Gutenberg<\/a> is just the plugin you\u2019ll need.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With exactly 81 blocks, the full version of Qi Blocks aims to be your go-to tool for expanding Gutenberg\u2019s native block selection. The blocks are sorted into usage-based categories such as WooCommerce blocks, typography, and showcase blocks.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The block you can use to display open hours, the <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/working-hours\/\" target=\"_blank\" rel=\"noopener\">Working Hours Gutenberg block<\/a>, is a business block, and a premium one, too. <strong>This means that you\u2019ll need the premium version of the plugin to be able to access this block.<\/strong> Once you\u2019ve taken care of that part, and installed the plugin, open up a page or post. We\u2019ll show you how you can use the block to create the same example we created using our Elementor addon.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Setting the Block Content<\/h3>\n<p>[\/vc_column_text][vc_column_text]Before getting started, make sure you have two columns set up for the blocks. Adding the Working Hours block to one of them will immediately show you lots of sample content \u2013 title, subtitle, dummy content, and five items.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"331\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Gutenberg\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-300x102.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-768x262.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-620x212.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On the right-hand side, you\u2019ll notice a bunch of content options, starting with the subtitle, title, and text. <strong>The first thing we did with the block was to replace the example copy with our own.<\/strong> For the Text field, which lets you display some text below the working hours table, <strong>we\u2019ve used some code to create a clickable phone number that\u2019s, for now, entirely invisible because it\u2019s white.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"365\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Content-Added.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Gutenberg Content Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Content-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Content-Added-300x113.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Content-Added-768x289.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Content-Added-620x234.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving further, <strong>we\u2019ve set the column responsive layout to activate under 680px<\/strong>. The next big set of content options is the item options. That\u2019s where you set the days and the hours, but also the colors of specific items if you want them to stand out from the rest, and an icon.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We created three instead of the default five items.<\/strong> We added an icon to all of them, as well as the appropriate days and hours information. <strong>For the third item, we set its color to #ffffff80.<\/strong> That made it white and invisible against the white background we have at the moment.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"391\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Items.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Gutenberg Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Items-300x121.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Items-768x310.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Items-620x250.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That\u2019s all the content setting you\u2019ll need to create a working hours table like the one in our example. You\u2019re free to add or remove items and change the copy to better reflect your business\u2019 open hours, of course, and get ready to move on to styling your open hours display.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling the Block<\/h3>\n<p>[\/vc_column_text][vc_column_text]A great place to start styling the Working Hours block is <em>Style &gt; General<\/em> because that\u2019s where the background options are. You\u2019ll be able to choose between a classic background \u2013 a solid color or an image, and a gradient background with lots of interesting settings.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For our example, <strong>we used the classic background, and set its color to #072c8d.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"394\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Background-Color.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Gutenberg Background Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Background-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Background-Color-300x122.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Background-Color-768x312.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Background-Color-620x252.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Back to <em>Style &gt; Item<\/em> options, and you\u2019ll see that every element of the item \u2013 the icon, day, hours, and line \u2013 has its own section of options. This is where you can set the size and color of these elements, as well as other styling and typography options where appropriate.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the icon options, <strong>we changed the color to #ffffff and the size to 15px<\/strong>. We then moved on to day options, <strong>where we changed the color to #ffffff<\/strong>. For the hours, we set the color to the same white using the hex code #ffffff, <strong>but we also used the typography options to change the font family to DM Sans, font size to 18px, weight to 500, and line height to 26px.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the line options, <strong>we set our border to be solid and its color to be #ffffff80.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"386\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Border.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Gutenberg Border\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Border.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Border-300x120.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Border-768x306.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Border-620x247.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to <em>Style &gt; Text<\/em> options, you\u2019re able to set up options for the title, subtitle, and text of the block. The options you have at your disposal are the ones you need to style text \u2013 tags, typography, and color options.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the title and subtitle, <strong>the only changes we made were to switch their color to #ffffff<\/strong>. We used the same color for the text, too, <strong>but we also set the weight to 500 in the typography options.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"364\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Text-Color.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Gutenberg Text Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Text-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Text-Color-300x113.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Text-Color-768x288.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Text-Color-620x233.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The final set of Style options is the Spacing options. Whatever spacing, padding, and margin you want to add or tweak, this is where you\u2019ll get to do it. More specifically, these are the options where you can set the space between the items and the item and holder padding, as well as the subtitle, title, and text margins.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For our working hours block, we set the space between items to 23px. <strong>For the holder padding, we entered the following values from left to right: 63px, 60px, 63px, 60px.<\/strong> We set the title margin bottom to 27px, and the text margin top to 32px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"433\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Spacing.jpg\" class=\"attachment-full size-full\" alt=\"Working Hours Gutenberg Spacing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Spacing.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Spacing-300x134.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Spacing-768x343.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Working-Hours-Gutenberg-Spacing-620x277.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That\u2019s it for the first of the two blocks. The easiest way to create the second would be to duplicate the first block, move it into the column to the right, and then just change the colors.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That\u2019s exactly what we did. In the code we used to create the phone number in the text \u2013 that\u2019s in the Content options \u2013 <strong>we set the color to #1e1e1e<\/strong>. We removed the icons from the items and switched the color of the third item to #e35521.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Moving on to the Style options, <strong>we changed the colors for the day and the hours to #1e1e1e, and for the border under <em>Style &gt; Line<\/em> to #1f1f1f33<\/strong>. We switched the background color to #fbf6eb. Finally, under <em>Style &gt; Text<\/em>, <strong>we changed all colors to #1e1e1e.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"display-open-hours-using-business-hours-indicator-plugin\"><\/a>How to Display Open Hours Using the Business Hours Indicator Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]We suggest using the <a href=\"https:\/\/wordpress.org\/plugins\/business-hours-indicator\/\" target=\"_blank\" rel=\"noopener noreferrer\">Business Hours Indicator plugin<\/a>, and we will be showing you around its free version.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first thing you need to do is <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\" target=\"_blank\" rel=\"noopener noreferrer\">install the plugin<\/a> on your WordPress website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once the plugin is installed and activated, you\u2019ll need to configure it from its <strong>settings<\/strong> screen.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Business-Hours-Indicator-Plugin-settings.jpg\" class=\"attachment-full size-full\" alt=\"Business Hours Indicator Plugin settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Business-Hours-Indicator-Plugin-settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Business-Hours-Indicator-Plugin-settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Business-Hours-Indicator-Plugin-settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <strong>general<\/strong> tab, select the time zone you are operating in from the time zone menu. We picked Belgrade. Then, select the time format you wish your hours to be displayed in. Choose between 12 or 24 hours. We chose the 24 hour format.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Select-the-time-zone.jpg\" class=\"attachment-full size-full\" alt=\"Select the time zone\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Select-the-time-zone.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Select-the-time-zone-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Select-the-time-zone-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, go to the <strong>hours<\/strong> tab. Click on the <strong>add location<\/strong> button to create a new shop location.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Add-location-button.jpg\" class=\"attachment-full size-full\" alt=\"Add location button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Add-location-button.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Add-location-button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Add-location-button-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now it\u2019s time to name your shop. We named our shop Bridge_Shop for this example. If you want to rename the shop you have to delete and recreate it, using the X button on the right.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Rename-the-shop.png\" class=\"attachment-full size-full\" alt=\"Rename the shop\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Rename-the-shop.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Rename-the-shop-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Rename-the-shop-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your shortcodes will use this name to display the opening hours you just set. If you have multiple shops, you will have to create separate locations for each one of them. <strong>If you have different opening hours in different time zones, this is a feature you might especially want to take note of<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you create your shop, you will see that you have some new options (<strong>edit hours<\/strong>,<strong> holidays<\/strong>, and <strong>vacation<\/strong>).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-New-options.jpg\" class=\"attachment-full size-full\" alt=\"New options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-New-options.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-New-options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-New-options-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]First, we will set up the regular hours using the <strong>edit hours<\/strong> option. Set up the opening hours using the menus for each day. When we are done, we will click the <strong>done<\/strong> button in the lower left. Note that leaving the hours for a day blank will mark the shop as closed for the day with no special settings required.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Edit-hours-option.jpg\" class=\"attachment-full size-full\" alt=\"Edit hours option\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Edit-hours-option.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Edit-hours-option-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Edit-hours-option-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Back on the <strong>hours<\/strong> tab, use the <strong>holidays<\/strong> option to set up special hours during the holidays.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Holidays-option.jpg\" class=\"attachment-full size-full\" alt=\"Holidays option\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Holidays-option.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Holidays-option-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Holidays-option-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Say Bridge_Shop is not open on December 25th and January 1st. You set that up by simply selecting the date from the menus on the left and leaving the times blank, then clicking the plus button on the right to add another day.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Say Bridge_Shop opens for 4 hours every January 2nd. You may set that up by setting the date using the menu on the left and the time using the ones on the right.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Setting-the-date-using-the-menu.jpg\" class=\"attachment-full size-full\" alt=\"Setting the date using the menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Setting-the-date-using-the-menu.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Setting-the-date-using-the-menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Setting-the-date-using-the-menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Again, when done, we will click the <strong>done<\/strong> button in the lower left.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, selecting the <strong>vacations<\/strong> option, we will set up days off for Bridge_Shop. Simply mark the days off interval using the date menus and clicking the <strong>plus<\/strong> button on the right to add as many intervals as necessary.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Vacations-option.jpg\" class=\"attachment-full size-full\" alt=\"Vacations option\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Vacations-option.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Vacations-option-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Vacations-option-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once more, when done, we will click the <strong>done<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now we have set up the regular hours, holidays, and vacation days for Bridge_Shop. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can always go back and reedit them, because holidays may change date, and vacations even more so.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Selecting the <strong>indicator<\/strong> tab, you will find several options for the open\/closed indicator.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Indicator-tab.jpg\" class=\"attachment-full size-full\" alt=\"Indicator tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Indicator-tab.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Indicator-tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Indicator-tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You may want your visitors to know at a glance whether a store of yours is open or closed. This is also a good chance to personalize your website, make it less generic. We will edit the <strong>open<\/strong> and <strong>closed<\/strong> messages using some HTML (we\u2019ll add a <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;b&gt;<\/code> tag for <strong>bold<\/strong> and the closing tag <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;\/b&gt;<\/code> to end the bold section) for emphasis.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/11-Personalize-your-website.jpg\" class=\"attachment-full size-full\" alt=\"Personalize your website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/11-Personalize-your-website.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/11-Personalize-your-website-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/11-Personalize-your-website-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can see the effect in the <strong>example<\/strong> window on the right-hand side.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This indicator tab also includes the time and day options. You may check them if you want your visitors to see the current time and day for your shop, dependent on the time zone. If you have set up your \u201copen\u201d and \u201cclosed\u201d indicators, they will be active during holidays and vacations. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Time-and-day-options.jpg\" class=\"attachment-full size-full\" alt=\"Time and day options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Time-and-day-options.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Time-and-day-options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Time-and-day-options-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The final set of options is the opening\/closing soon notification. When checked, this box opens a set of very useful options.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/13-Opening-closing-soon-notification.jpg\" class=\"attachment-full size-full\" alt=\"Opening closing soon notification\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/13-Opening-closing-soon-notification.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/13-Opening-closing-soon-notification-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/13-Opening-closing-soon-notification-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You may want to indicate if your shop opens or closes soon. You may also choose to personalize these messages, as we have. Be careful to use an X between curly brackets for the number of minutes before or until closing time. You can see an example in the picture below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/14-Personalize-these-messages.jpg\" class=\"attachment-full size-full\" alt=\"Personalize these messages\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/14-Personalize-these-messages.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/14-Personalize-these-messages-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/14-Personalize-these-messages-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, we get to the <strong>table<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>table<\/strong> tab is used to customize the appearance of your opening hours on your website. You may choose to display your opening hours in different ways dependent on the website\u2019s layout.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>normal<\/strong> display mode simply lists opening hours for each day.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/15-List-opening-hours-for-each-day.jpg\" class=\"attachment-full size-full\" alt=\"List opening hours for each day\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/15-List-opening-hours-for-each-day.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/15-List-opening-hours-for-each-day-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/15-List-opening-hours-for-each-day-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>consolidated<\/strong> display mode conflates all the hours in consecutive days which share the same opening hours.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/16-Consolidated-display-mode.jpg\" class=\"attachment-full size-full\" alt=\"Consolidated display mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/16-Consolidated-display-mode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/16-Consolidated-display-mode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/16-Consolidated-display-mode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>table<\/strong> display mode shows the opening hours as a table, but if you want an inline view, you have the inline mode. This works better if you want your opening hours to fit a horizontal bar, say.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/17-Table-display-mode.jpg\" class=\"attachment-full size-full\" alt=\"Table display mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/17-Table-display-mode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/17-Table-display-mode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/17-Table-display-mode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You may also want to display vacation times and holidays at all times. You can do this using the provided checkboxes.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/18-Display-vacation-times-and-holidays.jpg\" class=\"attachment-full size-full\" alt=\"Display vacation times and holidays\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/18-Display-vacation-times-and-holidays.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/18-Display-vacation-times-and-holidays-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/18-Display-vacation-times-and-holidays-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, we come to the nuts and bolts: the <strong>codes<\/strong> tab. This is where you can copy your shortcodes and paste them to where you need them.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are several shortcodes to choose from. The one we are most interested in here is the overview shortcode, but you can use these all over your website. You may, for instance, choose simply to display the open\/closed indicator as a welcoming message in individual posts.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/19-Welcoming-message.jpg\" class=\"attachment-full size-full\" alt=\"Welcoming message\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/19-Welcoming-message.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/19-Welcoming-message-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/19-Welcoming-message-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have now configured the plugin and familiarized ourselves with its options. There are many ways in which we can use it to display our opening hours on our website\u2019s front end. [\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Using the Plugin with the Gutenberg block editor<\/h3>\n<p>[\/vc_column_text][vc_column_text]Here is how to display your hours in a post using WordPress\u2019s default Gutenberg block editor. First copy the <strong>business hours shortcode<\/strong> from your plugin\u2019s <strong>codes<\/strong> tab, and open a post you are editing.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Click the <strong>plus<\/strong> sign in its top left corner to open the block picker. Now search for the shortcode block, and add it to your page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/20-Shortcode-block.jpg\" class=\"attachment-full size-full\" alt=\"Shortcode block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/20-Shortcode-block.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/20-Shortcode-block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/20-Shortcode-block-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Paste your shortcode into the block.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/21-Paste-your-shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Paste your shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/21-Paste-your-shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/21-Paste-your-shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/21-Paste-your-shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Remember to change \u201cyour location name\u201d to the location you want the hours of to appear in a post.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/22-Your-location-name.jpg\" class=\"attachment-full size-full\" alt=\"Your location name\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/22-Your-location-name.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/22-Your-location-name-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/22-Your-location-name-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To see if your opening hours have been displayed correctly, click the preview button in the upper right. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/23-Preview-opening-hours.jpg\" class=\"attachment-full size-full\" alt=\"Preview opening hours\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/23-Preview-opening-hours.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/23-Preview-opening-hours-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/23-Preview-opening-hours-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s all there is to it. Now we\u2019ll take a closer look at how to do the same using the Classic editor.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;81px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-corporate-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Using the Plugin with the Classic Editor<\/h3>\n<p>[\/vc_column_text][vc_column_text]The first thing you need to do is install and activate the Classic Editor plugin.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/24-Classic-editor.jpg\" class=\"attachment-full size-full\" alt=\"Classic editor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/24-Classic-editor.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/24-Classic-editor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/24-Classic-editor-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, after having configured your Business Hours Indicator plugin, you need to go to its <strong>codes<\/strong> tab and copy the shortcode you want.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/25-Codes-tab.jpg\" class=\"attachment-full size-full\" alt=\"Codes tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/25-Codes-tab.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/25-Codes-tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/25-Codes-tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Say you want to display your working hours as a post. Simply go to your post editing screen and paste it where you want to see it on your page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/26-Display-your-working-hours-as-a-post.jpg\" class=\"attachment-full size-full\" alt=\"Display your working hours as a post\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/26-Display-your-working-hours-as-a-post.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/26-Display-your-working-hours-as-a-post-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/26-Display-your-working-hours-as-a-post-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Remember to edit the shop name in your shortcode (change it to your location name.). [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/27-Edit-the-shop-name-in-your-shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Edit the shop name in your shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/27-Edit-the-shop-name-in-your-shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/27-Edit-the-shop-name-in-your-shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/27-Edit-the-shop-name-in-your-shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can click the preview button to see how your opening hours will appear on your website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/28-Click-the-preview-button.jpg\" class=\"attachment-full size-full\" alt=\"Click the preview button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/28-Click-the-preview-button.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/28-Click-the-preview-button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/28-Click-the-preview-button-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now you know how to display your opening hours in a post. You might also want to display it as part of another element of your website, such as the header or the footer.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Displaying Open Hours in the Footer or Headerr<\/h3>\n<p>[\/vc_column_text][vc_column_text]If you want to display your opening hours in your website\u2019s header or footer, or indeed any other widget area on your site, simply go to the <strong>Appearance &gt; Widgets<\/strong> screen of your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Footer.jpg\" class=\"attachment-full size-full\" alt=\"Appearance widget options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Footer.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Footer-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Footer-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next thing you need to do is find a place for your widget. We have selected the third footer column widget area.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/29-The-third-footer-column-widget-area.jpg\" class=\"attachment-full size-full\" alt=\"The third footer column widget area\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/29-The-third-footer-column-widget-area.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/29-The-third-footer-column-widget-area-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/29-The-third-footer-column-widget-area-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You then need to find your Business Hours Indicator plugin in your Available Widgets library. Select <strong>[BHI] opening hours overview<\/strong>, and then choose <strong>Footer column 3<\/strong> from the drop-down menu, and <strong>add<\/strong> it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/30-Opening-hours-overview.jpg\" class=\"attachment-full size-full\" alt=\"Opening hours overview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/30-Opening-hours-overview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/30-Opening-hours-overview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/30-Opening-hours-overview-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your plugin will now be shown in the footer. If you have multiple shops, remember to pick the one you want to display the opening hours for. You can change shops in the Locations dropdown menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/31-Locations-dropdown-menu.jpg\" class=\"attachment-full size-full\" alt=\"Locations dropdown menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/31-Locations-dropdown-menu.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/31-Locations-dropdown-menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/31-Locations-dropdown-menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You may also want to add a title to your widget section, making it stand out more.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/32-Add-a-title-to-your-widget-section.jpg\" class=\"attachment-full size-full\" alt=\"Add a title to your widget section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/32-Add-a-title-to-your-widget-section.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/32-Add-a-title-to-your-widget-section-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/32-Add-a-title-to-your-widget-section-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, in the same space on your footer, you can add another widget \u2013 your \u201con open\u201d message, for instance. Repeat the above steps to place the widget in the footer.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/33-Place-the-widget-in-the-footer.jpg\" class=\"attachment-full size-full\" alt=\"Place the widget in the footer\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/33-Place-the-widget-in-the-footer.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/33-Place-the-widget-in-the-footer-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/33-Place-the-widget-in-the-footer-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Since the entire section already has a title, we will only input the message itself. When the shop is open, the message will be displayed. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/34-Input-the-message-itself.jpg\" class=\"attachment-full size-full\" alt=\"Input the message itself\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/34-Input-the-message-itself.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/34-Input-the-message-itself-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/34-Input-the-message-itself-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When the shop is closed, no text will appear in the footer underneath the opening hours overview.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here is an example of how your footer may appear to the visitor now.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/35-How-your-footer-may-appear-to-the-visitor-now.jpg\" class=\"attachment-full size-full\" alt=\"How your footer may appear to the visitor now\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/35-How-your-footer-may-appear-to-the-visitor-now.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/35-How-your-footer-may-appear-to-the-visitor-now-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/35-How-your-footer-may-appear-to-the-visitor-now-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, you may be using Elementor, the visual page editor for WordPress. Not a problem: displaying your opening hours is even easier in Elementor.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Using the Plugin with the Elementor Page Editor<\/h3>\n<p>[\/vc_column_text][vc_column_text]After you install and set up the Business Hours Indicator plugin, copy the shortcode you need from the <strong>codes<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/36-Codes-tab.jpg\" class=\"attachment-full size-full\" alt=\"Codes tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/36-Codes-tab.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/36-Codes-tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/36-Codes-tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, access the page you wish to edit. Click the <strong>Edit with Elementor<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/37-Edit-with-Elementor.jpg\" class=\"attachment-full size-full\" alt=\"Edit with Elementor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/37-Edit-with-Elementor.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/37-Edit-with-Elementor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/37-Edit-with-Elementor-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Find the <strong>shortcode<\/strong> widget in your left-hand side menu (you should find it under the <strong>general<\/strong> heading).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/38-Find-the-shortcode-widget.jpg\" class=\"attachment-full size-full\" alt=\"Find the shortcode widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/38-Find-the-shortcode-widget.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/38-Find-the-shortcode-widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/38-Find-the-shortcode-widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Drag it to the desired location, in this case, the post main body.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/39-Drag-it-to-the-desired-location.jpg\" class=\"attachment-full size-full\" alt=\"Drag it to the desired location\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/39-Drag-it-to-the-desired-location.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/39-Drag-it-to-the-desired-location-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/39-Drag-it-to-the-desired-location-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Paste your shortcode in the shortcode field, and you will see it in the preview section. Remember to change the name of your shop to a location name (in this case the name we used is \u201cBridge_Shop\u201c), and the plugin will draw all your configuration data for that specific location.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/40-Paste-your-shortcode-in-the-shortcode-field.jpg\" class=\"attachment-full size-full\" alt=\"Paste your shortcode in the shortcode field\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/40-Paste-your-shortcode-in-the-shortcode-field.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/40-Paste-your-shortcode-in-the-shortcode-field-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/40-Paste-your-shortcode-in-the-shortcode-field-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One you are done with that, the business hours will be displayed in Elementor\u2019s preview screen. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/41-Business-hours.jpg\" class=\"attachment-full size-full\" alt=\"Business hours\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/41-Business-hours.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/41-Business-hours-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/41-Business-hours-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Still, Elementor\u2019s way is not the only one. WordPress\u2019s versatility means that you can do much the same things using different page editors. [\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Using the Plugin with the WPBakery Page Editor<\/h3>\n<p>[\/vc_column_text][vc_column_text]If you are using WPBakery, you still need to install and configure the Business Hours Indicator plugin to display your opening hours. Copy the shortcode you need from the <strong>codes<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/25-Codes-tab.jpg\" class=\"attachment-full size-full\" alt=\"Codes tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/25-Codes-tab.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/25-Codes-tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/25-Codes-tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, access the page you wish to edit. Click the <strong>WPBakery Page Builder<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/42-Edit-with-WPBakery-Page-Builder.jpg\" class=\"attachment-full size-full\" alt=\"Edit with WPBakery Page Builder\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/42-Edit-with-WPBakery-Page-Builder.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/42-Edit-with-WPBakery-Page-Builder-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/42-Edit-with-WPBakery-Page-Builder-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should be seeing the WordPress classic mode. In order to edit with Bakery, you need to click the Backend Editor button. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/43-Backend-Editor-button.jpg\" class=\"attachment-full size-full\" alt=\"Backend Editor button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/43-Backend-Editor-button.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/43-Backend-Editor-button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/43-Backend-Editor-button-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you want to add an element. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/44-Add-an-element.jpg\" class=\"attachment-full size-full\" alt=\"Add an element\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/44-Add-an-element.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/44-Add-an-element-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/44-Add-an-element-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Since we are adding a shortcode to the page, the element you want is Raw HTML. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/45-Raw-HTML.jpg\" class=\"attachment-full size-full\" alt=\"Raw HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/45-Raw-HTML.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/45-Raw-HTML-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/45-Raw-HTML-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the element editor, you can simply paste the shortcode you have previously copied.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/46-Simply-paste-the-shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Simply paste the shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/46-Simply-paste-the-shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/46-Simply-paste-the-shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/46-Simply-paste-the-shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You still need to change the location name to match one of the locations you have configured.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/47-Change-the-location-name.jpg\" class=\"attachment-full size-full\" alt=\"Change the location name\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/47-Change-the-location-name.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/47-Change-the-location-name-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/47-Change-the-location-name-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And your opening hours will be displayed.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/48-Your-opening-hours.jpg\" class=\"attachment-full size-full\" alt=\"Your opening hours\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/48-Your-opening-hours.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/48-Your-opening-hours-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/48-Your-opening-hours-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The same goes for all of the other shortcodes. In this case, we are only showing you the business hours overview, but you may choose to use any of the plugin-provided shortcodes here.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And you are done! Now let\u2019s see how you can use your theme\u2019s features to display opening hours on your WordPress website.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we have shown, there is a variety of ways to inform your visitors of your opening hours. An overview of opening hours is always useful, but you can also, say, tack on an \u201con open\u201d indicator to any of your menu item pages, prompting website visitors to sample your offers immediately. Or maybe you have a <a href=\"https:\/\/qodeinteractive.com\/magazine\/make-clickable-phone-number-in-wordpress\/\">clickable phone number<\/a>, and would like to indicate that you will not be immediately available: easily done with an \u201con closed\u201d indicator right underneath your phone number.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And even if your store is closed, a welcoming \u201cyou could be enjoying yourself here in X minutes\u201d message might turn out to be the difference between a website visit and a real life sale.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With so many easy ways to do it, and so much potential improvement to your visitor experience, there is no reason why you shouldn\u2019t display your opening hours on your website. [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>An easy, comprehensive, editor-independent, step-by-step guide to displaying opening hours in WordPress.<\/p>\n","protected":false},"author":16990,"featured_media":8471,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-8421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8421"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8421\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8471"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}