WooCommerce Add Custom Settings Tab

WooCommerce Add Custom Settings Tab – In this blog we see how we can add custom tabs to WooCommerce settings page. When we work with add-ons for WooCommerce, sometime we need to add some custom settings. So, it will be good as well as conceptual that we put those settings with default WooCommerce Settings.

We can use the hook ‘woocommerce_settings_tabs’ which is provided by WooCommerce and perform action on this hook.

add_action( 'woocommerce_settings_tabs', 'wk_add_custom_setting_tab' );

Now, in the callback function of above action, we add the link for our custom tab –

function wk_add_custom_setting_tab() {
   //link to custom tab
   $current_tab = ( $_GET['tab'] == 'custom' ) ? 'nav-tab-active' : '';
   echo '<a href="admin.php?page=wc-settings&amp;tab=custom" class"nav-tab '.$current_tab.'">'.__( "Custom", "domain" ).'</a>';
}

In above function, $current_tab variable used to display tab as active when selected. Here, we use name ‘custom’ for tab, it’s just an example, we can use any name here according to need.

Now, we see how we can add content to this custom settings page. For this we used hook ‘woocommerce_settings_{tab_name}’ –

add_action( 'woocommerce_settings_custom', 'wk_custom_tab_content' );

Now, we add content to the page using callback function of above action –

function wk_custom_tab_content() {
   // content
}

So, in this way we can add custom tabs to WooCommerc Settings page.

Varun Kumar 4 Badges 31 May 2023