Phil Ewels

A WordPress Customise Widget to add a global website banner, styled using a <a href="https://getbootstrap.com/docs/4.4/components/alerts/" rel="nofollow ugc">Bootstrap alert box</a>.
The plugin assumes that you’re already using Bootstrap, so you need to load the Bootstrap javascript and CSS separately.
<ul>
<li><a href="http://getbootstrap.com/" rel="nofollow ugc">Download Twitter Bootstrap</a></li>
<li><a href="http://www.bootstrapcdn.com/" rel="nofollow ugc">Bootstrap CDN</a> (directly link CSS and javascript files)</li>
<li><a href="https://getbootstrap.com/docs/4.4/components/alerts/" rel="nofollow ugc">Bootstrap Alerts in action</a></li>
</ul>
Once installed, you can add the alert to the correct location in your theme (for example, in <code>header.php</code> with the <code>global_bootstrap_banner()</code> function. 
For example:
<pre><code>if (function_exists('global_bootstrap_banner')){
 echo global_bootstrap_banner();
}
</code></pre>
If you prefer, you can use a shortcode instead:
<pre><code>[global-bootstrap-banner]
</code></pre>
<h4>Shortcode Options</h4>
The plugin works best when using the Customizer interface. However, if you wish you can use a shortcode and override most fields.
<ul>
<li><code>enabled</code> (default <code>true</code>)
<ul>
<li>Whether to show the banner or not.</li>
</ul>
</li>
<li><code>colour</code> (default <code>alert-primary</code>)
<ul>
<li>Bootstrap class to use for styling the alert.</li>
</ul>
</li>
<li><code>header_text</code>
<ul>
<li>Header – leave blank to skip the alert header.</li>
</ul>
</li>
<li><code>body_text</code>
<ul>
<li>Main text for the alert. You can use HTML.</li>
</ul>
</li>
<li><code>link_text</code>
<ul>
<li>Display text for a button at the bottom of the alert. Leave blank to skip.</li>
</ul>
</li>
<li><code>link_url</code>
<ul>
<li>URL for button to link to.</li>
</ul>
</li>
<li><code>link_class</code> (default <code>btn-primary</code>)
<ul>
<li>Bootstrap class to use for styling the button.</li>
</ul>
</li>
<li><code>link_new_window</code> (default <code>false</code>)
<ul>
<li>Whether to open the link in a new window or not.</li>
</ul>
</li>
<li><code>link_btn_lg</code> (default <code>false</code>)
<ul>
<li>Use the <code>btn-lg</code> class for the button (big button).</li>
</ul>
</li>
<li><code>link_btn_sm</code> (default <code>false</code>)
<ul>
<li>Use the <code>btn-sm</code> class for the button (small button).</li>
</ul>
</li>
<li><code>link_btn_block</code> (default <code>false</code>)
<ul>
<li>Use the <code>btn-block</code> class for the button (full width button).</li>
</ul>
</li>
<li><code>dismiss_btn</code> (default <code>true</code>)
<ul>
<li>Whether to show a dismiss button in the corner of the alert.</li>
</ul>
</li>
<li><code>dismiss_expiry</code> (default <code>14</code>)
<ul>
<li>How many days the dismissal cookie should last for before it is shown again.</li>
</ul>
</li>
<li><code>dismiss_id</code>
<ul>
<li>Random string to use for the dismissal cookie. Use a new one to force it to show for everyone.</li>
</ul>
</li>
<li><code>alert_before</code> (default <code><div class="global-bootstrap-banner container"></code>)
<ul>
<li>HTML to use before the alert.</li>
</ul>
</li>
<li><code>alert_after</code> (default <code></div></code>)
<ul>
<li>HTML to use after the alert.</li>
</ul>
</li>
<li><code>header_before</code> (default <code><h4 class="global-bootstrap-banner-heading alert-heading"></code>)
<ul>
<li>HTML to use before the heading.</li>
</ul>
</li>
<li><code>header_after</code> (default <code></h4></code>)
<ul>
<li>HTML to use after the heading.</li>
</ul>
</li>
<li><code>link_before</code> (default <code></code>)
<ul>
<li>HTML to use before the button.</li>
</ul>
</li>
<li><code>link_after</code> (default <code></code>)
<ul>
<li>HTML to use after the button.</li>
</ul>
</li>
</ul>
For example, a simple shortcode usage would be:
<pre><code>[global-bootstrap-banner body_text="This alert says something different"]
</code></pre>
Note that the shortcode first takes the settings from the Customizer and then overwrites these. 
So the above shortcode would show a header if it is set in the Customizer settings.
<h4>Credits</h4>
This plugin was written by <a href="https://github.com/ewels" rel="nofollow ugc">@ewels</a>.
<h4>Contributing</h4>
If you would like to contribute to this plugin, please go to the <a href="https://github.com/ewels/global-bootstrap-banner" rel="nofollow ugc">GitHub repository</a> and make a personal fork of the development version. You can then make your changes and submit a pull request. I will happily review the code and then merge when we’re both happy.

Global Bootstrap Banner

Add a global website banner using a Bootstrap alert box.

CloudRedux

Better showcase and display notices on your WooCommerce store
Ever wanted to show notifications, alerts, announcements or general notices on the product pages of your website? Product Notices for WooCommerce makes it a breeze for you!
Now, make your notices on your eCommerce websites stand out more than ever! With the new Product Notices for WooCommerce plugin, highlight the most important announcements or showcase discounts on all or on any product page.
With its two customization options:
<ol>
<li>
Global Notices– These are the notices that you can highlight across your store. This feature allows you to set up notices to show on all the products. It may be some kind of market announcement, alert, or for any other criteria.
</li>
<li>
Per-Product Notices-This feature allows you to show notices on a per-product basis. The notice may be in form of promo, discount, or any other criteria. This feature also allows you to hide the global notice from the page, thus allowing custom store notices an easy task.
</li>
</ol>
<h3>Setting up more than one Global and Per-Product Notices</h3>
If you wanted to show multiple notices, for instance, trying to show more than one product promo/discount, update, etc.
<ol>
<li>You can find the Product Notices menu by navigating to the Dashboard in WordPress.</li>
<li>Click on the Add New button and enter the desired content in the Notice Text field.</li>
<li>The Display Rules tab allows you to set up the product notice to show on all products in the store or on certain categories, tags, and products.</li>
<li>You can select from a set of default or custom appearance styles to control how your notice appears on product pages using the Notice Appearance dropdown.</li>
</ol>
<h3>Setting up Global Notice</h3>
In order to set up a Global Notice for the products on your store:
<ol>
<li>Navigate to the Settings menu under WooCommerce on the WordPress Dashboard.</li>
<li>Click on the Product Notice tab and use the settings field to set up the product notice to show on all the products in the store.</li>
<li>Choose from a set of default appearance styles to set-up how your notice shows up on the product pages using the Notice Appearance dropdown.</li>
</ol>
<h3>Setting up Per-Product Notice</h3>
If you would rather show a notice, alert, announcement, etc. only on one or more and not all the products in your store, the plugin allows you to do just that.
<ol>
<li>Head to the Edit Product screen for a product and look for the Product Notice/Information metabox.</li>
<li>Add the desired content in the Notice Text field.</li>
<li>Choose from a set of default appearance styles to set-up how your notice shows up on the page using the Notice Appearance dropdown.</li>
</ol>
<h3>Display notices effortlessly, with Shortcodes</h3>
The plugin also offers built-in shortcodes to display notices on the website. The shortcode allows you to display both global and a specific-product notice on a desired page or post.
<ol>
<li>Use <code>[crwcpn-notice]</code> shortcode to display the global notice as configured in the plugin settings.</li>
<li>To show the product notice on a different location on the product page, you can use the shortcode with an additional attribute <code>type</code>. So, the shortcode <code>[crwcpn-notice type="product"]</code> will display product notice on the product page at the desired location.</li>
<li>If you wish to show a product specific notice on a different page, post or elsewhere on the website, you can use the <code>id</code> attribute of the shortcode to do so. Using this <code>[crwcpn-notice type="product" id="123"]</code> will display the notice configured for the product with ID 123 on desired location on the website.</li>
</ol>

Product Notices for WooCommerce

Make the best of product announcements, promos, discounts, alerts, etc. on your eCommerce site with this one of its kind WooCommerce extension.

Global Bootstrap Banner vs Product Notices for WooCommerce