How to fix the header menu not showing on some WooCommerce pages?

  • Hi,
    I developed a WP classic theme locally with sample WooCommerce

    via Chrome dev tools, I noticed that WordPress automatically put a wrong header menu in some WooCommerce pages instead of displaying my custom header menu as in the other pages (as shown on the screenshot)

    <nav class="woocommerce-breadcrumb" aria-label="Breadcrumb">
................
</nav>

    My custom header menu does not display on the following WooCommerce pages:

    • Shop page
    • Product page
    • Category page
    • Tag page

    The footer menu always shows up

    The footer menu is implemented through a widget
    The header menu is implemented via a Boostrap navwalker, then I referenced it on my front-page.php

    I don’t understand why the header menu does not show on the pages mentioned above

    After doing a conflict test, the problem is caused by my theme

    Due to this, visually these pages do not look as good as the other pages of this sample website of mine

    How do I display my custom header menu everywhere on my website?

    • This topic was modified 10 months, 2 weeks ago by madleine.
Viewing 2 replies - 1 through 2 (of 2 total)
    1. WooCommerce Templates: WooCommerce utilizes its templates for specific pages. You might need to integrate your custom header within these WooCommerce templates to ensure consistency across your site. Look into the WooCommerce template files related to the Shop, Product, Category, and Tag pages and ensure they’re calling your custom header.
    2. Conditional Tags: WordPress offers conditional tags that help determine which page is being displayed. Ensure that your custom header is set to display using conditional tags like is_shop(), is_product(), is_category(), and is_tag() within your theme files.
    3. Header.php Inclusion: Ensure that your custom header is included correctly in the header.php file of your WordPress theme. If there’s a separate header for WooCommerce pages, make sure it’s appropriately linked and displayed.
    4. Theme Settings: Check your WordPress theme settings or customizer settings to ensure there are no settings that override the header display on specific WooCommerce pages.
    5. CSS and JavaScript: Sometimes, CSS or JavaScript conflicts can affect the display. Ensure there are no conflicting styles or scripts that might be hiding your custom header on WooCommerce pages.
    6. Plugins: If you’re using any plugins that modify the WooCommerce behavior or header functionality, ensure they’re not causing the issue. Try deactivating plugins one by one to identify if any specific plugin is causing the problem.

    By examining these areas and ensuring your custom header is integrated correctly with WooCommerce templates and conditional tags, you should be able to display your custom header menu consistently across all pages of your WordPress website, including WooCommerce pages. If you continue to face issues , consider seeking assistance from a WordPress developer or support community familiar with WooCommerce customization.

    Moderator bcworkz

    (@bcworkz)

    WooCommerce pages attempt to load a theme’s header-shop.php template for its page’s headers. When such a file does not exist, it falls back to header.php template.

    Assuming you don’t have a header-shop.php template, your theme’s header.php template should be used. How does your template implement a nav menu? I know you said bootstrap nav walker, but it’s unclear how that is managed from a header.php template. Most themes load the nav menu with wp_nav_menu(). This should be fully compatible with WC. If you’re doing something else, it’s likely where the problem lies.

    If all else fails, create header-shop.php template that outputs the header as you desire and do whatever is necessary here to get your nav menu to work. Since this template is only used on WC pages, you can do things special to make everything work without affecting the rest of your site since this template is only used on WC pages.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to fix the header menu not showing on some WooCommerce pages?’ is closed to new replies.