WooCommerce: Add Custom Tab @ Admin Settings

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
 * @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
 * @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
 * @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:

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Add Second Description @ Product Category Pages
    In terms of SEO, if you’re trying to rank your product category pages, you really need to make the most of the default WooCommerce product category “description” and “thumbnail”. Most themes, if compatible with WooCommerce, will show this content right below the product category name and above products. Nothing new so far. But what if […]
  • WooCommerce: Add Column to Orders Table @ WP Dashboard
    The WooCommerce Orders Table, which can be found under WP Dashboard > WooCommerce > Orders, provides us with 7 default columns: Order – Date – Status – Billing – Ship to – Total – Actions. This is used by shop managers to have an overview of all orders, before eventually clicking on a specific one. […]
  • WooCommerce: Display Custom Filters @ WP Dashboard > Products
    If you go to WordPress Dashboard > Products you will find default product admin filters such as “Select a category”, “Filter by product type”, “Filter by stock status”. What if you want to add more custom filters to let your shop managers find products easily? For example, you could add “Filter by product tag” (“product […]
  • WooCommerce: Hide/Show The WP Admin Bar
    In previous WooCommerce versions, new customers could access the WP Admin black bar after purchase. Now this seems fixed. Still, what about other user roles, and what if you want to override this default behavior? Well, here’s a quick snippet for you – feel free to use it in your own WooCommerce site. Enjoy!
  • WooCommerce: View Thank You Page @ Order Admin
    I’ve been testing for over an hour but finally I found a way to make this work. When you are in “Edit Order” view under WordPress Dashboard > WooCommerce > Orders, there is a dropdown of “Order actions”: “Email invoice”, “Resend new order notification”, etc. A major problem I’ve always had while troubleshooting or working […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

8 thoughts on “WooCommerce: Add Custom Tab @ Admin Settings

  1. Rodolfo Melogli , Thank You for your articles – there are very useful for me —- I wanted to attend your courses, but I live in Iran and the value of our currency is extremely low, and the cost of the course is too high for me.

  2. Hi Rodolfo, this is great, thank you!

    How would you access/display the stored data in a template (what is the template version of ‘get_option( ‘custom_tab_text_1′ )’?

    1. Exactly what you wrote. The settings API is just a wrapper for WordPress update_option / get_option. Which means this should work:

      get_option( 'custom_tab_text_1' );
      1. Ah brilliant, thanks again! ๐Ÿ™‚

  3. Oh thats cool. I think tha will help me alot.
    Some thing to try on the weekend.

    Thanks from Berlin
    Marco

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *