WooCommerce: Add Custom Tab @ WooCommerce Settings Page

WooCommerce offers a comprehensive set of settings organized into several tabs within the WordPress admin dashboard: General, Products, Shipping, Taxes, Payments, Accounts & Privacy, Emails, Integration, Advanced.

These are the core WooCommerce settings tabs. Depending on your specific setup and any additional plugins you might be using, you might see additional custom tabs as well.

Which is exactly what we’re doing today – creating a custom tab!

By adding a dedicated section within the WooCommerce settings, you can organize your custom settings and keep everything neatly categorized and consistent. This not only improves your own workflow but also makes it easier for any future collaborators to manage your custom options.

This tutorial will guide you step-by-step through the process of creating a custom tab in your WooCommerce settings. We’ll cover everything from setting up the basic structure to implementing functionalities like saving your custom options.

Enjoy!

PHP Snippet 1: Add Custom Tab to WooCommerce Settings Page

The woocommerce_get_settings_pages filter is the ideal way to add a custom tab to your WooCommerce settings in the WordPress dashboard. It allows you to hook into the process where WooCommerce retrieves its available settings pages and inject your custom tab into the mix.

For some reason, you can only use a custom PHP class that extends the WC_Settings_Page class to add a new settings tab. I tried not to use a class and it didn’t work, so I found that out the hard way.

This code will add a custom tab, with a custom tab label and a default “Save changes” button:

/**
 * @snippet       Custom Tab @ Woo Settings
 * @tutorial      Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli, Business Bloomer
 * @compatible    WooCommerce 8
 * @community     Join https://businessbloomer.com/club/
 */

add_filter( 'woocommerce_get_settings_pages', 'bbloomer_custom_woocommerce_settings_tab' );

function bbloomer_custom_woocommerce_settings_tab( $settings ) {

  if ( ! class_exists( 'WC_Settings_Custom_Tab' ) ) {
	  
		class WC_Settings_Custom_Tab extends WC_Settings_Page {
			function __construct() {
				$this->id = 'custom_tab';
				$this->label = 'Custom Tab';
				parent::__construct();
			}
      }
		$settings[] = new WC_Settings_Custom_Tab(); 
	  
	}
	
	return $settings;
	
}

Result:

PHP Snippet 2: Add Settings to Custom Tab @ WooCommerce Admin

Now that we have the tab, we can use the WooCommerce Settings API to inject custom settings.

The WooCommerce Settings API offers a structured way to create and manage settings pages within your WooCommerce store’s WordPress admin dashboard. It provides functionalities for defining settings sections, fields, and handling the saving and retrieval of those settings.

But before we inject settings, we need to tell WooCommerce where to inject them, and for this we need the ID we defined above:

$this->id = 'custom_tab';

In order to print some settings in the correct tab (our custom one), we need to hook into the woocommerce_get_settings_($id) filter, which allows you to manipulate the settings retrieved for a particular settings tab identified by the $id parameter.

Now that WooCommerce knows the correct tab, I can add some settings. In the example below you find a text input, a checkbox and a select example. The values entered will automatically save, that’s the magic thing here. The API will do it.

Also, you find an element at the beginning (‘title‘) and one at the end (‘sectionend‘). I believe without these two the layout of the settings will be messed up.

/**
 * @snippet       Custom Tab Settings @ Woo Settings
 * @tutorial      Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli, Business Bloomer
 * @compatible    WooCommerce 8
 * @community     Join https://businessbloomer.com/club/
 */

add_filter( 'woocommerce_get_settings_custom_tab', 'bbloomer_custom_woocommerce_settings_tab_settings', 10, 2 );

function bbloomer_custom_woocommerce_settings_tab_settings( $settings, $current_section ) {

   $settings = array(
      array(
			'title' => 'Custom tab title',
			'desc' => 'Custom tab description',
			'type' => 'title',
		),
		array(
			'name' => 'Custom text',
			'type' => 'text',
			'id' => 'custom_tab_text_1',
			'default' => '',
			'desc' => 'Enter some text',
			'desc_tip' => true,
			'autoload' => false,
		),
		array(
			'name' => 'Custom checkbox',
			'type' => 'checkbox',
			'id' => 'custom_tab_checkbox_1',
			'autoload' => false,
		),
		array(
			'name' => 'Custom select',
			'type' => 'select',
			'id' => 'custom_tab_select_1',
			'default' => 'a',
			'options'  => array(				
				'a' => 'Option A',
				'b' => 'Option B',
				'c' => 'Option C',
			),		
			'desc' => 'Choose an option',
			'desc_tip' => true,
			'autoload' => false,
		),
		array(
			'type' => 'sectionend',
		),
	);
	
	return $settings;
	
}

Result:

PHP Snippet 3: Retrieve WooCommerce Custom Tab Settings

As you can see, I used these IDs for the custom inputs:

'id' => 'custom_tab_text_1'

'id' => 'custom_tab_checkbox_1'

'id' => 'custom_tab_select_1'

Well, WooCommerce will automatically store the values inside the relevant WordPress options. This means you can get them, print them and/or use them in your custom code (admin or frontend).

For example, let’s add the option values on the single product page, below the title:

/**
 * @snippet       Get & Print WooCommerce Custom Tab Setting
 * @tutorial      Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli, Business Bloomer
 * @compatible    WooCommerce 8
 * @community     Join https://businessbloomer.com/club/
 */

add_action( 'woocommerce_single_product_summary', 'bbloomer_content_below_single_title', 6 );

function bbloomer_content_below_single_title() {
	$custom_tab_text_1 = get_option( 'custom_tab_text_1' );
	$custom_tab_checkbox_1 = get_option( 'custom_tab_checkbox_1' );
	$custom_tab_select_1 = get_option( 'custom_tab_select_1' );
	echo "<p>{$custom_tab_text_1}</p>";
	echo "<p>{$custom_tab_checkbox_1}</p>";
	echo "<p>{$custom_tab_select_1}</p>";
}

Option values and Result: