WooCommerce Headers

Header Store – logo, hamburger, cat nav, search

Store Header [ 1 ]

Components: Logo, Hamburger Menu (primary), Menu (secondary), Product Search Icon
Use Cases: Stores with lots of/long menu links. Stores that want categories in the header.

Pair header with a top bar for additional elements:
Top Bar1 | Top Bar2
Header Store – logo, hamburger, search, cart, icons

Store Header [ 2 ]

Components: Logo, Hamburger Menu, Icons (map, account, wishlist, cart), Product Search
Use Cases: Stores with lots of/long menu links. Stores using wishlists.

Pair header with a top bar for additional elements:
Top Bar3
Header Store – logo, hamburger, search, cart, icons, cat nav

Store Header [ 3 ]

Components: Logo, Hamburger Menu (primary), Icons (map, account, wishlist, cart), Menu (secondary), Product Search Icon
Use Cases: Stores that want categories in the header. Stores with centered/vertical logos.

This header type shouldn't need a top bar.

Stores can also make use of site headers, paired with topbars containing store elements.

Header Simple – logo, hamburger, cta

Site Header [ 1 ]

Components: Logo, Hamburger Menu, CTA
Use Cases: Sites with lots of/long menu links. Sites that want a Call-to-action in the header.

Pair header with a top bar for store elements:
Top Bar1 | Top Bar2 | Top Bar3
Header Simple – logo, menu, cta

Site Header [ 3 ]

Components: Logo, Menu, Call-to-action
Use Cases: Sites with very few menu items. Sites that want a CTA in the header.  

Pair header with a top bar for store elements:
Top Bar1 | Top Bar2 | Top Bar3
Header Simple – logo, menu with cta css

Site Header [ 5 ]

Components: Logo, Menu, CSS Class 
Use Cases: Sites with very few menu items. Sites that want a menu item styled like a CTA.

Pair header with a top bar for store elements:
Top Bar1 | Top Bar2 | Top Bar3