Remove header from the WooCommerce administrator panel

Question

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;
}

Screenshot

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. — m4n0, Aug 02 '19 at 08:19

score 7 · Answer 1 · edited Mar 13 '22 at 23:15

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>';
}

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. — user754314, Mar 07 '23 at 02:41

score 3 · Answer 2 · edited Mar 13 '22 at 22:59

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:

edited Mar 13 '22 at 22:59

Peter Mortensen

30,738
21
105
131

answered Aug 02 '19 at 09:18

m4n0

29,823
27
76
89

Thanks a lot for you time.This also works but above answer is more close what i what i am looking for – Ferna Aug 03 '19 at 10:58
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? – m4n0 Aug 03 '19 at 11:03
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. – m4n0 Aug 04 '19 at 12:04

Mizuho Ogino · Answer 3 · 2022-06-08T00:06:25.107

3

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>';
});

edited Jun 08 '22 at 00:06

answered Apr 17 '21 at 09:25

Mizuho Ogino

336
1
7

1

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. – Jonas Lundman Dec 16 '21 at 12:34
its work for latest woo july 22 – Andy Jul 29 '22 at 00:51

score 2 · Answer 4 · edited Aug 15 '20 at 11:38

2

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');

edited Aug 15 '20 at 11:38

David Buck

3,752
35
31
35

answered Aug 15 '20 at 11:30

WP Development

21
1

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. – 7uc1f3r Aug 15 '20 at 12:20
1

The best solution 2021. This solution also adresses an issue with invalid header size caused by other solutions. – D.A.H Mar 08 '21 at 11:14

score 0 · Answer 5 · edited Mar 16 '20 at 05:47

0

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>';
}

edited Mar 16 '20 at 05:47

julianstark999

3,450
1
27
41

answered Mar 15 '20 at 18:40

M Osama Amin

1

babakfp · Answer 6 · 2021-09-23T23:44:25.030

0

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

edited Sep 23 '21 at 23:44

answered Sep 23 '21 at 23:38

babakfp

164
6

2

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. – Lizesh Shakya Sep 24 '21 at 14:50

score -1 · Accepted Answer · edited Mar 13 '22 at 23:01

-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' ) );

edited Mar 13 '22 at 23:01

Peter Mortensen

30,738
21
105
131

answered Aug 02 '19 at 09:35

itzmekhokan

2,597
2
9
9

There is no any explanation added and this code does not work also. – D.A.H Mar 08 '21 at 11:11

Remove header from the WooCommerce administrator panel

7 Answers7