Remove WooCommerce admin header

General
1

I want to remove the WooCommerce admin header bar. It takes up screen real estate for users who don’t need to see it (eg. fulfilment staff), is buggy (shows tasks that can not be completed, shows as unfinished when task list is disabled) and does not do anything useful.

I don’t just want to hide it, I also want to prevent the API calls the admin bar makes to retrieve task lists and options every time a fulfilment operator opens an order or refreshes the admin list.

The fixes in Remove header from the WooCommerce administrator panel are all CSS based and do not solve.

2

The WooCommerce admin bar is a top-level navigation bar that displays various information and actions for administrators. Removing it involves both CSS and JavaScript modifications to hide the element and prevent its functionality.

Steps to Remove the Admin Bar and Prevent API Calls:

  1. CSS Modification:
  • Add the following CSS to your WooCommerce theme’s stylesheet to hide the admin bar visually:
    CSS
#wpadminbar {
    display: none !important;
}

JavaScript Modification:

  • Create a JavaScript file (e.g., admin-bar-removal.js ) and add the following code:
    JavaScript
jQuery(document).ready(function($) {
    // Prevent admin bar initialization
    $(document).on('wp', function(event) {
        if (event.type === 'wp-load') {
            $(document.body).addClass('no-admin-bar');
        }
    });

    // Remove admin bar elements
    $('#wpadminbar').remove();
});

Enqueue JavaScript:

  • In your theme’s functions.php file, enqueue the JavaScript file:
    PHP
function my_theme_enqueue_scripts() {
    wp_enqueue_script('my-admin-bar-removal', get_template_directory_uri() . '/js/admin-bar-removal.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

Explanation:

  • The CSS hides the admin bar visually.
  • The JavaScript code prevents the admin bar from initializing and removes it from the DOM.
  • The wp-load event listener ensures the script runs before the admin bar is fully loaded.

Additional Considerations:

  • Customizations: If you have custom plugins or themes that rely on the admin bar, you might need to adjust their functionality or disable them.
  • Accessibility: Ensure your modifications don’t negatively impact accessibility for users who rely on the admin bar’s features.
  • Testing: Thoroughly test your website after making these changes to ensure it functions as expected.

By following these steps, you should be able to effectively remove the WooCommerce admin bar and prevent its associated API calls, improving the user experience for your fulfilment staff.