Topic: Woocommerce custom header

arbogear
May 1, 2025 at 11:35 am

Hello,

I have looked the solution already whole day and not found anything what would solve my case. There are a lot of similar topics out there, but i have not found what maches exactly to my case tough.

Made a lot of research and used AI, but found lot of outdated data aswell, what are not relevant anymore. For example i dont find how to add icons if i needed, there were tutorials, but if look, then in my installation there are no options for that anymore.

Here in support forum were also on suggestion that it is possible to push navigation below header like this Under “Navigation Location,” select “Below Header” – but i dont see that option at my installation.

So i decided to rise a topic to find a solution to following:

I have header like this: https://cln.sh/nq6zcTr8 on that page here https://arbogear.com. This is setup so that under elements i have one element what creates top bar and then one element what places the account icon near cart icon.

However i need not to change this so that between site logo and cart/account icons i have big search field and navigation menu should be as third row under it. And i dont find good solution for that.

I tried to create this so that i disabled site logo and cart icon and then created middle row and added there logo as image then search field and account and mini cart icons but it coused a lot of issues after that as when i hide original cart and add items to cart on shop the new minicart shows it to be empty, so somekind of conflict are there. Also the site logo creating as image does not work very well too.

So is there a good and reasonable way to create three row header so that i have top row, middle row with site logo + search bar with shortcode + account and cart icons on right and third row with navigation/menu so that it wont mess up also a much my mobile menu?
Ying
May 1, 2025 at 1:20 pm
Hi there,

I think creating a custom site header via the block element – site header is the way to go.

1. in this block element – site header, add site logo block, a search bar shodecode, account icon, as for the cart, you can try WC’s cart block, or use below PHP code to create a shortcode [custom_cart] for the cart:
```
function generate_woo_cart(){
	 ob_start();
	if ( ! class_exists( 'WooCommerce' ) ) {
	    return;
	}

	if ( ! isset( WC()->cart ) ) {
		return;
	}

	$has_items = false;

	if ( ! WC()->cart->is_empty() ) {
		$has_items = 'has-items';
	}

	printf(
		'<span class="menu-bar-item wc-menu-item %2$s %3$s">
			%1$s
		</span>',
		generatepress_wc_cart_link(),
		is_cart() ? 'current-menu-item' : '',
		$has_items	 
	);
	return ob_get_clean();
}
add_shortcode('custom_cart', 'generate_woo_cart');
```
Adding PHP: https://docs.generatepress.com/article/adding-php/

2. Set navigation location to below header at cusotmizer > layout > primary navigation.
arbogear
May 1, 2025 at 1:42 pm

Thanks for Your quick reply. That second point i do not understand. What im doing here wrong. I dont find such place. Please see screenvideo: https://cln.sh/rlP3kG4f
Ying
May 1, 2025 at 3:04 pm

The option of #2 point is highlighted in the below screenshot:
https://app.screencast.com/EjmcyQXp46ede
arbogear
May 8, 2025 at 1:44 am

Alright, thank You.
Ying
May 8, 2025 at 8:53 am

No Problem 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Woocommerce custom header