Request Quote

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' );
Note – In woocommerce_settings_{tab_name} hook, must contain the tab name in place of {tab_name} using which we create our custom tab in first function.

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.

Support

Still have any issue feel free to add a ticket and let us know your views to make the code better https://webkul.uvdesk.com/en/customer/create-ticket/

Thanks for Your Time! Have a Good Day!

. . .

Comment

Add Your Comment

Be the first to comment.

css.php

Index