It 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.
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.
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.
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.
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:
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:
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.
Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.
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.
Comments are closed.