Header Customization

Woozio offers 21+ pre-built header layouts to choose from, each designed for different industries and use cases. You can customize every aspect of your header including the announcement bar, logo, navigation menu, search functionality, wishlist, shopping cart, and mobile menu.

Header Layout Presets

Each header layout can be customized to match your brand and requirements.

Setting Display Conditions

After creating or editing your header template, you need to set where it should be displayed on your site. Elementor allows you to display the header across the entire site or only on specific pages.

Display on Entire Site

To display your header template across all pages of your website:

1. After saving your header template, click Display Conditions or Publish Settings
2. In the modal that appears, you'll see "Where do you want to display your Template?"
3. Set the condition to Entire Site:
   • Click the dropdown next to "Include"
   • Select Entire Site from the options
4. Click Save & Close to apply

Display on Specific Pages

To display your header only on specific pages or page types:

1. In the Display Conditions modal, click Add condition
2. Configure the condition:
   • Include/Exclude: Choose whether to include or exclude pages matching the condition
   • Condition Type: Select from options like:
     • Singular: Individual pages, posts, or custom post types
     • Archive: Category, tag, or custom taxonomy archives
     • Front Page: Your homepage
     • 404 Page: Error page
     • Search Results: Search results page
   • Sub-condition: Further refine (e.g., "Pages", "Posts", "Products")
   • Specific Selection: Choose specific pages (e.g., "Home Sport", "About Us", etc.)
3. Click the X icon to remove a condition if needed
4. Add more conditions by clicking Add condition again
5. Click Save & Close to apply

Example Conditions:

• Include → Singular → Pages → Home Sport: Show header only on the "Home Sport" page
• Include → Archive → Product Categories → Electronics: Show header only on Electronics category pages
• Exclude → Singular → Pages → Checkout: Hide header on checkout page

Header Components

Site Logo

Configure your site logo in Elementor Site Settings. The logo will be applied site-wide and displayed in the header.

For detailed instructions, see Site Settings - Site Identity.

Navigation Menu

Configure your main navigation menu in two ways:

Option 1: WordPress Menu

1. Go to Appearance → Menus in WordPress admin
2. Create a new menu or edit an existing one

Option 2: Elementor Menu Widget

For advanced mega menu customization with columns, images, and custom layouts, see Mega Menu.

Search Functionality

Woozio supports two types of search implementations:

Option 1: Search Widget

1. Edit your Header template with Elementor
2. Drag the Search Form widget into your header
3. Configure search settings (placeholder text, search source, categories)

Option 2: Search Icon with Popup

1. Add a Button or Icon widget to your header
2. Link it to an Elementor Popup with a search form

Wishlist

Configure wishlist functionality and appearance in Woozio → Theme Options → Shop.

The wishlist icon will appear in your header with a badge showing the number of saved items.

Configure the mini wishlist icon in your header to display wishlist items and enable dropdown functionality.

For detailed wishlist settings, see Shop Settings - Product Features.

Mini Cart