{"id":4512,"date":"2020-08-28T22:19:47","date_gmt":"2020-08-28T16:49:47","guid":{"rendered":"https:\/\/awpguide.com\/?p=4512"},"modified":"2020-08-28T22:19:47","modified_gmt":"2020-08-28T16:49:47","slug":"create-a-woocommerce-announcement-bar","status":"publish","type":"post","link":"https:\/\/awpguide.com\/wp-guides\/create-a-woocommerce-announcement-bar\/","title":{"rendered":"How To Create a WooCommerce Announcement Bar Using OptinMonster?"},"content":{"rendered":"<p>Are you running a <a class=\"thirstylink\" title=\"WooCommerce\" href=\"https:\/\/awpguide.com\/refer\/woocommerce\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">WooCommerce shop<\/a>? If you are, probably you will be running some kind of limited-time deals and related promotions. For getting more viewability for your promotions, we could use the notification bars in our online shop. Normally, using some HTML and CSS for styling will do the job.<\/p>\n<p>But that&#8217;s not recommended at all. In this article, we are going to show you how can you create a WooCommerce announcement bar in WooCommerce using the OptinMonster plugin!<\/p>\n<h2 style=\"text-align: center;\">OptinMonster<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4515\" title=\"optinmonster plugin\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-plugin.png\" alt=\"optinmonster\" width=\"1700\" height=\"935\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-plugin.png 1700w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-plugin-300x165.png 300w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-plugin-1024x563.png 1024w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-plugin-768x422.png 768w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-plugin-1536x845.png 1536w\" sizes=\"(max-width: 1700px) 100vw, 1700px\" \/><\/p>\n<p><a class=\"thirstylink\" title=\"OptinMonster\" href=\"https:\/\/awpguide.com\/refer\/optinmonster\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">OptinMonster<\/a> is one of the popular WordPress plugin available in the market. It is used for generating leads and conversions from existing website traffic. There are so many <a href=\"https:\/\/awpguide.com\/showcase\/best-wordpress-lead-generation-plugins\/\">lead generation plugins<\/a> are available in the market and OptinMonster is the #1 among them. The plugin is created by Awesome Motive &#8211; the same company behind <a class=\"thirstylink\" title=\"WPForms\" href=\"https:\/\/awpguide.com\/refer\/wpforms\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">WPForms<\/a>, <a class=\"thirstylink\" title=\"MonsterInsights\" href=\"https:\/\/awpguide.com\/refer\/monsterinsights\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">MonsterInsights<\/a>, <a class=\"thirstylink\" title=\"SeedProd\" href=\"https:\/\/awpguide.com\/refer\/seedprod\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">SeedProd<\/a>, etc.<\/p>\n<p>The plugin can be downloaded from the WordPress plugins repository (<a title=\"OptinMonster API\" href=\"https:\/\/wordpress.org\/plugins\/optinmonster\/\" target=\"_blank\" rel=\"noopener noreferrer\">OptinMonster API<\/a>).<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4532\" title=\"optinmonster plugin wp\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-plugin-wp.png\" alt=\"optinmonster wp plugin\" width=\"1350\" height=\"897\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-plugin-wp.png 1350w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-plugin-wp-300x199.png 300w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-plugin-wp-1024x680.png 1024w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-plugin-wp-768x510.png 768w\" sizes=\"(max-width: 1350px) 100vw, 1350px\" \/>But as of today, there are no free plans available. You will need to authenticate the plugin with your OptinMonster account for embedding the forms inside your blog\/ WooCommerce shop.<\/p>\n<p>Some of the popular features they got are<\/p>\n<ul>\n<li><a href=\"https:\/\/awpguide.com\/wp-guides\/how-to-create-a-coupon-wheel-optin\/\">Coupon Wheel Optin<\/a>.<\/li>\n<li>Lightbox Popup.<\/li>\n<li>Exit-Intent.<\/li>\n<li>Countdown Timer.<\/li>\n<li>Floating Bar.<\/li>\n<li>Yes\/ No Forms.<\/li>\n<li>MonsterLinks.<\/li>\n<li>Announcement Bars.<\/li>\n<\/ul>\n<p>Etc.<\/p>\n<p>And in this article, we will be using the announcement bar feature for creating our optin.<\/p>\n<h2 style=\"text-align: center;\">OptinMonster Pricing<\/h2>\n<p>Now, let&#8217;s take a look at the pricing of <a class=\"thirstylink\" title=\"OptinMonster\" href=\"https:\/\/awpguide.com\/refer\/optinmonster\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">OptinMonster<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4516\" title=\"optinmonster pricing and plans\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-pricing-and-plans.png\" alt=\"optinmonster pricing\" width=\"1285\" height=\"928\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-pricing-and-plans.png 1285w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-pricing-and-plans-300x217.png 300w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-pricing-and-plans-1024x740.png 1024w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-pricing-and-plans-768x555.png 768w\" sizes=\"(max-width: 1285px) 100vw, 1285px\" \/><\/p>\n<ul>\n<li><strong>Basic &#8211; $9\/ month.<\/strong><\/li>\n<li><strong>Plus &#8211; $19\/ month.<\/strong><\/li>\n<li><strong>Pro &#8211; $29\/ month.<\/strong><\/li>\n<li><strong>Growth &#8211; $49\/ month.<\/strong><\/li>\n<\/ul>\n<p>With your PayPal account or Credit Card, you will be able to complete the purchase. And also, the team is offering a 14-days moneyback guarantee. So if you are not satisfied with the purchase and need a refund, easily open a support ticket to the billing department.<\/p>\n<p>They will issue a complete refund for you!<\/p>\n<h2 style=\"text-align: center;\">How To Create a WooCommerce Announcement Bar<\/h2>\n<p>Once you have purchased OptinMonster, you will need to log in to your account. They will send you the login credentials to your registered email address.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4534\" title=\"optinmonster login\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-login.png\" alt=\"optinmonster login\" width=\"1599\" height=\"824\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-login.png 1599w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-login-300x155.png 300w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-login-1024x528.png 1024w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-login-768x396.png 768w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/optinmonster-login-1536x792.png 1536w\" sizes=\"(max-width: 1599px) 100vw, 1599px\" \/><\/p>\n<p>After logging in to your account, you will need to create a new campaign. And when you select the campaign type, choose <strong>Floating Bar<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4535\" title=\"floating bar\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/floating-bar.png\" alt=\"floating bar optin\" width=\"620\" height=\"152\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/floating-bar.png 620w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/floating-bar-300x74.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>They have 50+ pre-made templates that will work on every device (mobile optimized). So if you need to start instantly, you can choose any of the pre-made templates. On the other hand, you can also start from scratch with a blank template. There, you will need to design every element of your floating bar.<\/p>\n<p>You will need to choose a template that suits your needs.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4536\" title=\"template\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/template.png\" alt=\"floating bar templates\" width=\"620\" height=\"243\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/template.png 620w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/template-300x118.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>Several templates are available like<\/p>\n<ul>\n<li>Donate.<\/li>\n<li>Alert.<\/li>\n<li>Social.<\/li>\n<li>Basic.<\/li>\n<li>Charted.<\/li>\n<li>Split.<\/li>\n<\/ul>\n<p>Etc.<\/p>\n<p>For this tutorial, we are going to use the Alert template. Once you have chosen it, you will need to name your campaign. And also, choose the website you are planning to embed the announcement bar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4537\" title=\"name\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/name.png\" alt=\"campaign name\" width=\"620\" height=\"344\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/name.png 620w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/name-300x166.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>Soon, you will be redirected to the OptinMonster campaign editor.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4538\" title=\"builder\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/builder.png\" alt=\"campaign builder\" width=\"620\" height=\"246\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/builder.png 620w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/builder-300x119.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>This is where you can make changes to your bar. You can edit the text you have on the bar change colors, etc. The builder will show you a live preview on the right side. So you can see what you are doing.<\/p>\n<p>You might want to consider changing the background color of our announcement bar. We recommend you use a color that suits your website.<\/p>\n<p>From the optin configuration, you can change it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4539\" title=\"color\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/color.png\" alt=\"background color\" width=\"310\" height=\"528\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/color.png 310w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/color-176x300.png 176w\" sizes=\"(max-width: 310px) 100vw, 310px\" \/><\/p>\n<p>Once you have done with the basic settings, you can set up the button action. When you are promoting one of your top-selling products or a combo pack, probably you need to enter the URL of that specific page. So from the dropdown, choose <strong>Redirect to a URL option<\/strong>, enter the URL in the box.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4540\" title=\"action\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/action.png\" alt=\"button action\" width=\"313\" height=\"335\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/action.png 313w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/action-280x300.png 280w\" sizes=\"(max-width: 313px) 100vw, 313px\" \/><\/p>\n<p>The thing is, by default, the bar will be placed at the bottom of your website. Thankfully, with some customizations, we will be able to move it to somewhere else. On your home menu, you could see something called <strong>Floating Settings<\/strong>. You will need to select it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4541\" title=\"floating settings\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/floating-settings.png\" alt=\"home, floating settings\" width=\"318\" height=\"353\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/floating-settings.png 318w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/floating-settings-270x300.png 270w\" sizes=\"(max-width: 318px) 100vw, 318px\" \/><\/p>\n<p>There, enable the option that will show the bar at top of your website.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4542\" title=\"top bar\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/top-bar.png\" alt=\"top bar\" width=\"318\" height=\"136\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/top-bar.png 318w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/top-bar-300x128.png 300w\" sizes=\"(max-width: 318px) 100vw, 318px\" \/><\/p>\n<p>From now on, the display bar will be shown at the top of the website. You have almost done with the customization. The next thing we need to do is, set up the display rules. You can choose when you need to display your notification bar on the website. On the top menu, you could see an option called <strong>Display Rules<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4543\" title=\"display rules bar\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/display-rules-bar.png\" alt=\"display rules\" width=\"620\" height=\"97\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/display-rules-bar.png 620w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/display-rules-bar-300x47.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>You will need to select it. Mainly, you could add two conditions.<\/p>\n<ul>\n<li>Show the bar on your whole WooCommerce shop.<\/li>\n<li>Show on custom product pages.<\/li>\n<\/ul>\n<p>For better viewability, we recommend you showing the optin site-wide. So when a visitor lands on any of your pages, they will probably see the notification bar you have on the top.<\/p>\n<p>Configure the display rules according to your needs.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4544\" title=\"rules\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/rules.png\" alt=\"display rules\" width=\"620\" height=\"323\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/rules.png 620w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/rules-300x156.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>After configuring the rules and everything, you are good to go. Simply publish the campaign.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4545\" title=\"publish\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/publish.png\" alt=\"publish the campaign\" width=\"620\" height=\"90\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/publish.png 620w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/publish-300x44.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>You are ready to embed the optin on your WooCommerce site. For that, you will need to install and activate the OptinMonster WordPress plugin on your site. Once you have activated it, connect it with your account.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4517\" title=\"connect om\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/connect-om.png\" alt=\"connect optinmonster\" width=\"550\" height=\"280\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/connect-om.png 550w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/connect-om-300x153.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/p>\n<p>You will see all the available optins after successful linking. And you can enable our notification bar from there. Check your websites; frontend from an incognito window or another browser. You will see the notification bar as we configured in the OptinMonster app.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4546\" title=\"bar\" src=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/bar.png\" alt=\"notification bar\" width=\"620\" height=\"291\" srcset=\"https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/bar.png 620w, https:\/\/awpguide.com\/wp-content\/uploads\/2020\/08\/bar-300x141.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>That&#8217;s it! Pretty simple, isn&#8217;t it?<\/p>\n<h2 style=\"text-align: center;\">Get Started With OptinMonster<\/h2>\n<p>You can get the premium version of OptinMonster from below.<\/p>\n<p><a class=\"cubutton thirstylink\" title=\"OptinMonster\" href=\"https:\/\/awpguide.com\/refer\/optinmonster\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Get Started With OptinMonster<\/a><\/p>\n<p>So this is how you can create a WooCommerce announcement bar using the OptinMonster plugin.<\/p>\n<p>We hope you have found this article helpful and enjoyed the read. If you did, please consider sharing this article with your friends and fellow bloggers on social media. You can check out <a href=\"\/blog\">our blog section<\/a> for more related articles and product reviews.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you running a WooCommerce shop? If you are, probably you will be running some kind of limited-time deals and &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How To Create a WooCommerce Announcement Bar Using OptinMonster?\" class=\"read-more button\" href=\"https:\/\/awpguide.com\/wp-guides\/create-a-woocommerce-announcement-bar\/#more-4512\" aria-label=\"Read more about How To Create a WooCommerce Announcement Bar Using OptinMonster?\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":4530,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/posts\/4512"}],"collection":[{"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/comments?post=4512"}],"version-history":[{"count":4,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/posts\/4512\/revisions"}],"predecessor-version":[{"id":4548,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/posts\/4512\/revisions\/4548"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/media\/4530"}],"wp:attachment":[{"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/media?parent=4512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/categories?post=4512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/tags?post=4512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}