2021 Q4 Sale BFCM – Free Users Sitewide Banner

  1. Documentation
  2. Themes
  3. Storefront
  4. Codex
  5. Snippets

Add informational bar to the Storefront header

On our Storefront demo, you may have noticed the black bar beneath the navigation that includes informational text. This is possible by adding basic HTML to a text widget placed in the Header widget region.

Screen Shot 2015-02-03 at 12.11.09
The informational bar on the Storefront demo

To recreate, add a text widget to your Header widget region and insert the following code:


<div style="text-align: center; background: #000; color: #fff; padding: .53em; font-weight: bold;">
<span style="margin: 0 1em;">Check out our new Jackets!</span>
<span style="margin: 0 1em;">Get 25% off your first order!</span>
<span style="margin: 0 1em;">Free shipping on all orders over $100!</span>
</div>

view raw

widget.html

hosted with ❤ by GitHub

This can be tweaked to suit your needs.

Note: This is a Developer level doc. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our  Support Policy.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment