WooCommerce Header & Footer Revamp

I want my current WooCommerce shop to feel polished from the very first pixel, so the job is entirely about redesigning the header and footer within my active WordPress theme. No new theme is required—just a thoughtful, code-clean layout change that slots neatly into the existing setup.

Here’s the core of what I need:
• Build the new header and footer inside a child theme (or via hooks in a custom plugin) so future updates stay safe.
• Keep all store functionality—cart, account links, search, mobile menu—intact while improving spacing, hierarchy, and overall UX.
• Match colours and typography already in use; I only want structural changes, not a brand refresh.
• Make sure the new layout stays fully responsive and passes basic browser testing on Chrome, Firefox, Safari, Edge, and mobile.
• Deliver your work with concise comments in the PHP, HTML, CSS (or SCSS) so I can tweak easily.

Acceptance criteria
1. Header and footer render flawlessly on desktop, tablet, and phone (Google Chrome dev tools breakpoints).
2. No console errors and no impact on Core Web Vitals scores once the changes are live.
3. All WooCommerce templates remain update-safe (overrides isolated in the child theme).

You’ll be working directly on a staging site that mirrors production; access will be granted after kickoff. Familiarity with WooCommerce hooks, PHP, and modern CSS is essential. Once the staging version is approved, I will handle the push to production, but please package any files or SQL snippets you touch so I have a clean record.

If this sounds straightforward to you, let’s get the header and footer looking the way they should.