Top Notification Bar

Conditional Top Bars

By default, when you enable the notification top bar, it will be shown on every page/post/archive/product/etc.

Enabling the top bar on specific pages can improve the user experience a bit. You might also find that keeping the top bar off your front page might reduce your cumulative layout shift.

If WooCommerce is detected on your site, you can choose some additional endpoints for your top bars.

Conditionally showing the Top Bar using code

To get fine-grained control, you can implement your own conditions with just a few lines of code.

Information It’s recommended to use a custom child theme so you can edit functions.php.

In the top bar’s settings, disable the notification bar for the entire site. Enter your top banner’s notification content – remember to wrap it in paragraph tags <p>...</p>.

Edit your child theme’s functions.php file and paste the following into it:

function custom_tbag_enable_notification($is_enabled) {
	if (is_front_page()) {
		$is_enabled = true;
	}

	return $is_enabled;
}
add_filter('tbag_enable_notification', 'custom_tbag_enable_notification', 10, 1);

Set a different notification on the WooCommerce “shop” page

If the top bar is enabled on your entire site, but you want a different message on your shop’s main page, you can try something like this in your functions.php:

function custom_tbag_notification_html($notification_html) {
	if (function_exists('is_shop') && is_shop()) {
		$notification_html =
			'<p><i class="fas fa-store"></i> 10% off This Weekend Only <i class="fas fa-store"></i></p>';
	}

	return $notification_html;
}
add_filter('tbag_notification_html', 'custom_tbag_notification_html', 10, 1);

Notice the Font Awesome “fa-store” icons in there, and that the entire notification HTML is wrapped up in paragraph tags.

Dynamically enable/disable the “Close” button

This snippet will remove the “close” button for any top bar that’s showing on a WooCommerce Product page:

function custom_tbag_enable_close_button($is_enabled) {
	// Don't show the close button for top bars on Product pages.
	if (function_exists('is_product') && is_product()) {
		$is_enabled = false;
	}

	// For other content, let the regular settings pass-through.
	// ...

	return $is_enabled;
}
add_filter('tbag_enable_close_button', 'custom_tbag_enable_close_button', 10, 1);