Home    Articles

 

How to add a new Settings Tab in Wordpress / Woocommerce admin area

 

To add a new settings tab in wordpress/woocommerce admin area you need to create two hooked functions in a activated plugin.

I will explain it first so you can see entire code bellow.

1. First Function

It is used to create a new tab, i will show you how to add a subtab becouse this is most requested. I needed a subtab in API tab so i've creded add_subtab  function. Then i hooked it to woocommerce_get_settings_api hook. This function will create automaticly FORM tag and Save Changes button. 

You don't have to do the update code.

2. Second Function

It is used to display HTML fields where you will be able to edit and save the settings. I've creaded a new function called add_subtab_settings hooked to same woocommerce_get_settings_api hook.

3. The code

add_filter( 'woocommerce_get_sections_api','add_subtab' );
function add_subtab( $settings_tabs ) {
    $settings_tabs['custom_settings'] = __( 'Custom Settings', 'woocommerce-custom-settings-tab' );
    return $settings_tabs;
}

# add settings ( HTML Form )
add_filter( 'woocommerce_get_settings_api', 'add_subtab_settings', 10, 2 );
function add_subtab_settings( $settings ) {
	$current_section = (isset($_GET['section']) && !empty($_GET['section']))? $_GET['section']:'';
	if ( $current_section == 'custom_settings' ) {
		$custom_settings = array();
		$custom_settings[] = array( 'name' => __( 'Custom Settings', 'text-domain' ), 
								   'type' => 'title', 
								   'desc' => __( 'The following options are used to ...', 'text-domain' ), 
								   'id' => 'custom_settings'
								  );
								  
		$custom_settings[] = array(
									'name'     => __( 'Field 1', 'text-domain' ),
									'id'       => 'field_one',
									'type'     => 'text',
									'default'  => get_option('field_one'),
									
								);
		
		$custom_settings[] = array( 'type' => 'sectionend', 'id' => 'test-options' );				
		return $custom_settings;
	} else {
	 	// If not, return the standard settings
		return $settings;
	}
}

Yes, it is that simple. If you want a subtab in another tab (ex: Products) use another hook like woocommerce_get_settings_products

 

by