Remove header from the WooCommerce administrator panel

5.3k Views Asked by At

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

Screenshot

7

There are 7 best solutions below

1
itzmekhokan On BEST ANSWER

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' ) );
3
m4n0 On

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:

Enter image description here

0
M Osama Amin On

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>';
}
1
Chris Stewart On

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>';
}
2
WP Development On
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');
2
Mizuho Ogino On

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>';
});
1
babakfp On
// Removing the embedded element.
#woocommerce-embedded-root {
  display: none !important;
}
// Removing the empty spacing after removing the embedded element.
#wpbody {
  margin-top: unset !important;
}