Home › WordPress Recipies › Block selected tabs at Woocommerce Product Data metabox

Block selected tabs at Woocommerce Product Data metabox

Posted on by — 3 Comments ↓

WooCommerce WordPress plugin adds “Product Data” metabox to the “Product” editor page with these tabs:

  • General
  • Inventory
  • Shipping
  • Linked Products
  • Attributes
  • Advanced

What to do, if you need to block access to the selected tabs for the users with some role?
Add code below to your active theme functions.php file or setup it as the must-use plugin. Just replace role ID with your own and comment/uncomment lines for required tabs.

add_filter('woocommerce_product_data_tabs', 'block_wc_product_tabs');

function block_wc_product_tabs($tabs) {

  if (!current_user_can('wc-inventory')) {  // replace role ID with your own
      return $tabs;
  }
  
  //unset($tabs['general']);
  //unset($tabs['inventory']);
  unset($tabs['shipping']);
  unset($tabs['linked_product']);
  unset($tabs['attribute']);
  unset($tabs['variations']);
  unset($tabs['advanced']);

  return $tabs;
}

Solution for older versions

Older versions of WooCommerce did not support ‘woocommerce_product_data_tabs’ filter. Tabs list was hard coded at writepanel-product_data.php file. Developer did not add any filter to intercept that output and make correction needed at the server side. Is there a decision? It is possible to block the user interface for this tabs. Let’s remove those tabs with a little piece of jQuery code added to the page.

In order to block the selected tabs at Woocommerce “Product Data” metabox for the selected role we may use this recipe:
1) Copy this JavaScript code below and save it to the custom.js file at the ‘js’ subfolder of your active theme.

// remove selected WooCommerce Products Tab
 jQuery('.general_tab').remove();  // General
 jQuery('#general_product_data').css('display', 'none');  // hide General tab content as it is visible by default
 
 jQuery('.inventory_tab').remove();  // Inventory
 jQuery('.shipping_tab').remove();  // Shipping
 jQuery('.linked_product_tab').remove(); // Linked Products
 jQuery('.attribute_tab').remove();  // Attributes
 jQuery('.variations_tab').remove();  // Variations
 jQuery('.advanced_tab').remove();  // Advanced

As you see above we use class name in order to select and remove needed tab from the WooCommerce tabs list. Modify this list according to your needs. In current form it removes All tabs :).

Now open your active theme functions.php file and add code below to the end of it:

 if (current_user_can('some_role')) {
    function load_custom_js($page_hook) {
        global $post;

        if (!in_array($page_hook, array('post.php', 'post-new.php'))) {
            return;
        }
        if ($post->post_type!=='product') {
            return;
        }

        $script_url = get_stylesheet_directory_uri(). '/js/custom.js';
        wp_enqueue_script ( 'custom-js', $script_url, array('jquery'), false, true );
        
    }
    add_action( 'admin_enqueue_scripts', 'load_custom_js' );
 } // if current_user_can('some_role)

This code loads our custom JavaScript code to the products page editor. Replace ‘some_role’ there to the role ID for which you decided to to hide the subset of Woocommerce Product Data metabox tabs.

Code above was tested with WooCommerce version 2.1.9 and WordPress 3.9.1.

Share