How to Hide Admin Bar for WooCommerce Customers or By User Roles

Hide Admin Bar By RolesIt is important to hide the admin bar in WooCommerce from subscribers, customers, and non-admin users to avoid access to the WordPress dashboard. There are ways of hiding the WordPress admin bar as highlighted in this tutorial – how to hide the admin bar in WordPress.These same techniques can be employed in a WooCommerce site but with some conditions for each of the cases.

WooCommerce Hide Admin Bar for Customers or Subscribers

Hide Admin Bar for WooCommerce Admin Option

To hide the admin bar for the administrator, there are probably some plugins that can also help and will work for WooCommerce as well.

Before you use a plugin you should first try out this quick option in the WordPress admin dashboard.This option works well for WooCommerce sites as well, there is no difference.

Go to the administrator user profile settings and check out for this option to hide admin bar for admins when viewing the site.WooCommerce Hide Admin Bar for Customers or Subscribers

Uncheck this option and save the settings then visit the frontend to see if the admin bar has been hidden. As you can see in the image below the admin bar will be hidden for the admin user when viewing the site.

WooCommerce Hide Admin Bar for Customers or Subscribers

This is an important way to get a glimpse of how your site looks like when you are not logged in.

It also helps when you are trying to debug some WooCommerce theme issues that relate to the display of the header.

WooCommerce Hide Admin Bar Code Option

To implement the same for the WooCommerce customers and subscribers, we need to use the ‘show_admin_bar’  filter to return false to that we hide the admin bar.

There are a variety of ways you can use this hook and there is also a function with the same name that works the same.

The function show_admin_bar( bool $show ) takes one parameter that is a Boolean ( either True or False ) and can be used as follows :

show_admin_bar( false );

This code, when added to the functions.php file of your theme, will hide the admin bar. I have tested it with the WooCommerce storefront theme installed and it works perfectly it hides the admin bar.

WooCommerce Hide Admin Bar for Customers or Subscribers

You can improve this function further and add a conditional test where you allow admin to view the admin bar while the customer should not view it.

In this case, you would conditionally test with the customer role or any other role on your site that you want to hide admin bar from.

You can get the roles available in your WordPress site from the Add New User and the last option has Roles drop-down:

wordpress user roles

To get the current user role, I wrote a tutorial on how to get the current role in WordPress and you can use it in the case to get the customer user role and set the show_admin_bar() function to false.

In this case, the following is the code you can use to get the current user role and conditionally check if the user role is a customer.

This code I shared in the tutorial on how to get current user role in WordPress and we can repurpose it in this case:

add_action( 'wp_head', 'njengah_get_current_user_role');

function njengah_get_current_user_role() {

  if( is_user_logged_in() ) { // check if there is a logged in user

   $user = wp_get_current_user(); // getting & setting the current user
   $roles = ( array ) $user->roles; // obtaining the role

   //return $roles; // return the role for the current user

     // Test with print_r
      print('<pre>');
      print_r( $roles);
       print('</pre>');

    } else {

          return array(); // if there is no logged in user return empty array

   }

}

When you test this code by adding to the functions.php, you should see the current user role displayed in the array as shown in the image below:

WooCommerce Hide Admin Bar Code Option

We can get this user role from the array using the key [0] and when we modify the code slightly and print out the user role we should see the user role printed out as in the following modified code:

add_action( 'wp_head', 'njengah_get_current_user_role_print');

function njengah_get_current_user_role_print() {

        if( is_user_logged_in() ) { // check if there is a logged in user

          $user = wp_get_current_user(); // getting & setting the current user

          $roles = ( array ) $user->roles; // obtaining the role

            echo $roles[0];

              } else {

              return array(); // if there is no logged in user return empty array

       }

}

Since we have successfully obtained the user role we can now use it in the show_admin_bar() function conditionally to hide the admin bar for a specific user role which can be any role.

For illustration, we now hide the admin bar for the administrator role using the code below:

add_action( 'wp_head', 'njengah_hide_admin_bar_for_administrator');

function njengah_hide_admin_bar_for_administrator() {

     if( is_user_logged_in() ) { // check if there is a logged in user

       $user = wp_get_current_user(); // getting & setting the current user

         $roles = ( array ) $user->roles; // obtaining the role

          if( $roles[0] == 'administrator'){ //check the role here. You can replace it with other user roles. Example 'customer' editor etc

           echo $roles[0]; //print the role to screen for demo purposes (should be removed in production)

           show_admin_bar( false ); // hide the role for this condition

     }

        } else {

           return array(); // if there is no logged in user return empty array

     }

}

When you add this code to the functions.php file, you will see the administrator role is displayed on the screen as before and the admin bar has been hidden conditionally.

You can replace this administrator role with the customer and you can also add several conditional tests in the condition as follows:

add_action( 'wp_head', 'njengah_hide_admin_bar_for_customer');

function njengah_hide_admin_bar_for_administrator() {

if( is_user_logged_in() ) { // check if there is a logged in user

              $user = wp_get_current_user(); // getting & setting the current user

                $roles = ( array ) $user->roles; // obtaining the role

                    if( $roles[0] == 'customer'){ //check the role here. You can replace it with other user roles. Example 'customer' editor etc

                echo $roles[0]; //print the role to screen for demo purposes (should be removed in production)

                      show_admin_bar( false ); // hide the role for this condition

        }

        } else {

                return array(); // if there is no logged in user return empty array

      }

}

As in the administrator case when you test you should see the name of the role displayed as the customer and the admin bar hidden.

Hide Admin Bar by Current User Capabilities

An alternative way to hide admin bar from all users expect admin you can add the following code to the functions.php :

if ( ! current_user_can( 'manage_options' ) ) {

   show_admin_bar( false );

}

This code uses the current_user_can() conditional test and you can edit it to different privileges like for a customer it should be as follows :

if ( ! current_user_can( 'read' ) ) {

   show_admin_bar( false );

}

This is equivalent to the role of a subscriber in WordPress. WooCommerce creates two roles – Customer and Shop Manager. The customer is equivalent to the subscriber so in this case, the capabilities of a subscriber are ‘read’.

You can check out all the capabilities of WordPress users from – Roles & Capabilities documentation. You can learn more about WooCommerce roles from WooCommerce roles & capabilities docs.

Implementing the Code to Hide Admin Bar in WooCommerce

In the code above, we have explained in detail how everything works to hide the admin bar in WooCommerce.

If you noted I was using an add_action() attached to the ‘wp_head’ for testing purpose but in production, we need to use a filter instead of an action hook.

In this case, the filter should hook on ‘show_admin_bar' and the code should be as follows:

add_filter( 'show_admin_bar', 'njengah_hide_admin_bar_for_customers', 20, 1 );

function njengah_hide_admin_bar_for_customers($show){

           $user = wp_get_current_user(); // getting & setting the current user

            $roles = ( array ) $user->roles; // obtaining the role

               if( $roles[0] == 'administator'){ // Test the user roles here based on the array keys [0] [1] and respective values

                       $show = false;

                              return $show;

               }

}

You can also use the capabilities of each role to hide admin bar and the filter will be as follows:

/**

* Hide Admin bar for other roles expect admin

*/

add_filter( 'show_admin_bar', 'njengah_hide_admin_bar_others_expect_admin', 20, 1 );

function njengah_hide_admin_bar_others_expect_admin( $show ) {

    if ( ! current_user_can( 'administrator' ) ) $show = false;

     return $show;

    }

Add this code to the functions.php to hide the admin bar from other roles expect administrators.

Final Thoughts

We have outlined how you can hide the admin bar in WordPress or WooCommerce using various approaches. You can choose either of these methods and add the code to your functions.php. You can also modify the code further to make it suitable for the different scenarios like to hide admin bar from a WordPress custom user role.


Customer Reviews

NJENGAH

Customer Reviews

Jeffrey Todd 04/07/2020

Exceptional Plugin & Service

I'm in the process of building my new website, and I had a question about changing some text within the WooCommerce plugin. I was spinning my wheels trying to figure it out. Joe reached back and worked with me - going above and beyond! - until I fully understood how to effectively change what I wanted. How can you ask for more than that? I highly recommend WooCommerce (and Joe!), the plugin and service are exceptional!
-Jeffrey Todd (MyLifeChart.com)