1. Home
  2. WC Vendors Pro
  3. Code Snippets
  4. Add Custom Settings Tab to Vendor Dashboard

Add Custom Settings Tab to Vendor Dashboard

There might be a time when you want to create a new tab on the vendor dashboard settings page. The following code will give you the scaffold required to hook into the settings form and output a custom tab. 

You would also need to use our form helper to add form elements and have them saved with the vendor’s settings. 

//  Add the tab to the tab nav
add_filter( 'wcv_store_tabs', 'add_custom_tab_nav' );
function add_custom_tab_nav( $tabs ){ 
	// Target is the custom css id for the content tab in the code below this
	$tabs['custom_tab'] = array( 
		'label'  => __( 'Custom', 'wcvendors-pro' ),
		'target' => 'custom-tab',
		'class'  => array(),
	); 

	return $tabs;
}

/**
 * Add the tab contents after one of the store tabs choose the tab you want this after 
 * 
 * Available actions are : 
 * 
 * wcvendors_settings_after_store_tab
 * wcvendors_settings_after_payment_tab
 * wcvendors_settings_after_branding_tab
 * wcvendors_settings_after_shipping_tab
 * wcvendors_settings_after_social_tab
 * wcvendors_settings_after_policies_tab
 * wcvendors_settings_after_seo_tab
 *  
 */
add_action( 'wcvendors_settings_after_seo_tab', 'custom_tab_content_after_shipping' ); 
function custom_tab_content_after_shipping(){ 
?>
	<div class="tabs-content" id="custom-tab">
	<h1>My custom settings tab</h1>
	<p> form elements go here</p>
	</div>
<?php 
}

The results of the above will look like the following screenshot.

actions

filters

Updated on March 8, 2021

Was this article helpful?