Home / WordPress / Create simple sticky bar with cookie close button

Create simple sticky bar with cookie close button

Published On: February 18th, 2020|Categories: WordPress|Tags: cookies, sticky bar, woocommerce, wordpress|3 min read|

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:

HTML structure,
CSS to style it beautifully for desktop & mobile,
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>