Remove header from the WooCommerce administrator panel

Question

Using the storefront theme, I want to remove breadcrumbs when logged in to the administrator panel WooCommerce |Products Store Activity| Inbox| Orders| Stock| Reviews| Notices| breadcrumbs.

Please note this: I need if you are logged in as the current user, not an administrator. The code I used using CSS:

.woocommerce-layout__header-breadcrumbs {
   display: none !important;
}
.woocommerce-layout {
   display: none !important;
}

Kasten

It would be better if you add the HTML code as well. – Dioptometer

?? didnt get you – Kasten

You have posted the CSS code that you have tried but what about the HTML associated with it? :) Others cannot verify that the code is right unless they are on the same options setup by you. – Dioptometer

Answer 1

Add the following code snippet to your active theme's functions.php file -

remove_action( 'in_admin_header', array( 'WC_Admin_Loader', 'embed_page_header' ) );

Hellman

There is no any explanation added and this code does not work also. – Rhodolite

Answer 2

As of 28 March 2020, for all users, the following code removes the new Woocommerce Header added into the WordPress Admin. Put the following in your theme's functions.php file:

// Disable WooCommerce Header in WordPress Admin
add_action('admin_head', 'Hide_WooCommerce_Breadcrumb');

function Hide_WooCommerce_Breadcrumb() {
  echo '<style>
    .woocommerce-layout__header {
        display: none;
    }
    .woocommerce-layout__activity-panel-tabs {
        display: none;
    }
    .woocommerce-layout__header-breadcrumbs {
        display: none;
    }
    .woocommerce-embed-page .woocommerce-layout__primary{
        display: none;
    }
    .woocommerce-embed-page #screen-meta, .woocommerce-embed-page #screen-meta-links{top:0;}
    </style>';
}

Incidental

Thank you so much for this! The header was so annoying because it was covering my text editor bar at the top so that I had to keep scrolling to the top of the page to change anything. – Gastroenterology

Answer 3

That code would work fine, but the question is where do you use it? The CSS would affect only the frontend while the Admin End has a different style sheet source. You can try adding an Add Admin CSS plugin to post that code or use a custom action like this below in your function.php file:

add_action('admin_head', 'Hide_WooCommerce_Breadcrumb');

function Hide_WooCommerce_Breadcrumb() {
  echo '<style>
    .woocommerce-layout__header-breadcrumbs {
      display: none;
    }
  </style>';
}

Output:

Dioptometer

Thanks a lot for you time.This also works but above answer is more close what i what i am looking for – Kasten

Cool. Ofcourse you are allowed to choose the better solution but I though you just wanted to remove the Breadcrumbs and not the options on the right. Does his code not hide them too? – Dioptometer

So why would you use that solution when you only want to hide the breadcrumbs? :) I just re-framed the question so that the chosen answer syncs well. – Dioptometer

Answer 4

After WooCommerce 5.2, we have to cancel the margin of #wpbody. This code snippet is the revised version of itzmekhokan's and still is active.

add_action( 'admin_head', function (){
  remove_action( 'in_admin_header', array( 'Automattic\WooCommerce\Admin\Loader', 'embed_page_header' ) );
  echo '<style>#wpadminbar + #wpbody { margin-top:0; }</style>';
});

---Addition---

The class name has changed from around version 6.5.

add_action( 'admin_head', function (){
  remove_action( 'in_admin_header', array( 'Automattic\WooCommerce\Internal\Admin\Loader', 'embed_page_header' ) );
  echo '<style>#wpadminbar + #wpbody { margin-top:0; }</style>';
});

Nammu

This sounds more correct as the event listener by the loader class should stop searching for "hidden" display none selectors and populate Inbox with crap and so on. – Rake

its work for latest woo july 22 – Outhouse

Answer 5

function wp_custom_css() {
    echo '<style>
    .woocommerce-embed-page #wpbody .woocommerce-layout, .woocommerce-embed-page .woocommerce-layout__notice-list-hide+.wrap {
        padding-top: 10px;
    }
    .woocommerce-embed-page #screen-meta, .woocommerce-embed-page #screen-meta-links {
        top: 0px;
    }
    .woocommerce-layout__header {
        display: none;
    }
    .woocommerce-layout__activity-panel-tabs {
        display: none;
    }
    .woocommerce-layout__header-breadcrumbs {
        display: none;
    }
    </style>';
}
add_action('admin_head', 'wp_custom_css');

Diactinic

This question already contains multiple answers and an accepted answer. Can you explain (by editing your answer) where your answer differs from the other answers? Also know that Code-only answers are not useful in the long run. – Meltage

The best solution 2021. This solution also adresses an issue with invalid header size caused by other solutions. – Rhodolite

Answer 6

UPDATED 2020:

function Hide_WooCommerce_Breadcrumb() {
    echo '<style>
    .woocommerce-layout__header {
        display: none;
    }
    .woocommerce-layout__activity-panel-tabs {
        display: none;
    }
    .woocommerce-layout__header-breadcrumbs {
        display: none;
    }
    </style>';
}

Furtive

Answer 7

// Removing the embedded element.
#woocommerce-embedded-root {
  display: none !important;
}
// Removing the empty spacing after removing the embedded element.
#wpbody {
  margin-top: unset !important;
}

Broadwater

This might be a good solution, but it found itself in the Low Quality Answers queue for review. Please add some discussion explaining the solution and how it works, to make it more helpful to future readers of this site. – Countrywoman