Hello, in this one I’ll show you how to easily create a sticky bar with close button using cookies for your WordPress site or WooCommerce store. The sticky bar is really useful if you want to promote a product, service, landing page, site notice, cookie notice or anything you need. The sticky bar can be site wide or displayed on specific pages.

For this to work, we’ll need:

  1. HTML structure,
  2. CSS to style it beautifully for desktop & mobile,
  3. JavaScript to handle the cookie.

For the demo I’ll create a bottom sticky bar to promote a product on my WooCommerce store like this:

HTML bottom sticky bar

Add the structure bellow to your footer.php in your WordPress child theme. (This can be used on any site as well).

<div id="sticky-bar">
<img src="https://demo.webroom.tech/wp-content/uploads/2020/02/webroom-tshirt.png" style="height: 40px; display: inline; vertical-align: top;"> <span style="font-weight:bold">Awesome Orange T-Shirt Now 50% OFF</span> <span style="font-weight:bold"><a class="button orange" href="https://www.demostore.com/tshirt/">Get It Now</a></span> <a href="JavaScript:void(0)" onclick="createCookie('sticky-bar-cookie', true, 1)" id="closeprem" style="position: absolute; top: 15px; right: 20px;"><i style="font-size: 24px;color: initial;" class="far fa-times-circle" aria-hidden="true"></i></a>
</div>

Add CSS style to the bar to make it sticky and beautiful

#sticky-bar {
    position: fixed;
    bottom: 0;
    display: block;
    background: #fff;
    padding: 10px;
    width: 100%;
    text-align: center;
    border-top: 1px solid#ddd;
    z-index: 99999;
    height: 60px;
    line-height: 38px;
}
#sticky-bar .orange {
	padding: 0px 20px;
    border-radius: 5px;
    margin-left: 50px;
    background: #f45440;
    color: #fff;
}

Regarding the style of the sticky bar you are free to make it top sticky, make it not sticky at all, or make it look like a rectangle in the bottom right corner.

Finally add JavaScript to handle the sticky bar cookie behavior.

Clicking the X on the sticky bar will save a cookie and hides the bar from the site. As long the cookie is present, the sticky bar won’t show. The code below creates reads the cookie. There is a function to erase the cookie if you need (not called in the demo here).

<script>
if (readCookie("sticky-bar-cookie")) {
	document.getElementById('sticky-bar').style.display = 'none';
} 
function createCookie(name,value,days) {
  if (days) {
	var date = new Date();
	date.setTime(date.getTime()+(days*24*60*60*1000));
	var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
	document.getElementById('sticky-bar').style.display = 'none';
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
	var c = ca[i];
	while (c.charAt(0)==' ') c = c.substring(1,c.length);
	if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
function eraseCookie(name) {
  createCookie(name,"",-1);
}
function hide(obj) {
var el = document.getElementById(obj);
	el.style.display = 'none';
}
</script>




Recent Articles

From Our Community Forums

Blog Categories

Related Articles

If you enjoyed reading this, then please explore our other articles below:

Comments

Leave a comment

Leave a Reply

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.