Stop cluttering the WordPress admin menu with separate settings pages! Learn to create professional, native-feeling custom tabs and options right inside the WooCommerce Settings interface. This session is an essential guide to the Settings API, showing you how to reuse core elements and hooks to build clean, organized settings for your themes, plugins, or client features.
Hosted by Rodolfo Melogli
Session overview
As a developer, the quality of your plugin or theme is judged not only by its features but by its user experience. A messy, confusing settings page can lead to frustration, support requests, and negative reviews.
This webinar is a deep, practical dive into the WooCommerce Settings API, specifically designed to teach you how to build native, clean, and intuitive configuration interfaces. Our objective is to empower you to stop using outdated or generic WordPress functions and start leveraging the established WooCommerce framework, ensuring your custom options look and function exactly like the core settings page. You will walk away with the practical knowledge to streamline your product’s configuration and elevate its professional appearance.
This session is a step-by-step guide to developing, styling, and saving custom options within the WooCommerce environment.
Anatomy of WooCommerce settings: we will begin with a comprehensive breakdown of the existing WooCommerce settings structure. This involves identifying the key filter hooks and classes that the system uses to organize its pages. Understanding this core mechanism is essential, as we will show you how to efficiently reuse core CSS and HTML elements for your custom fields, immediately giving your settings a professional, native look without writing extra styling code.
Creating your custom tab: the first major step is adding your dedicated custom tab to the main WooCommerce settings menu. We will walk through the specific filters required to inject your new tab, ensuring it appears in the correct order and loads without conflicts. This section focuses on the proper way to name, label, and register your tab, which serves as the professional entry point for all your plugin’s options.
Developing and registering custom options: once your tab is active, we move into the heart of the process – defining and rendering your specific settings fields. You’ll learn the structure of the settings array, which allows you to define different input types (text fields, checkboxes, select menus, color pickers, etc.) that leverage the built-in WooCommerce rendering functions. This is key to consistency, as you won’t need to manually create the form elements or handle their submission security.
Data handling and persistence: the final and most crucial step is making sure your settings are saved, validated, and retrieved securely. We will cover the filter hooks (if any!) responsible for sanitizing and validating user input before it hits the database, preventing common security vulnerabilities. Crucially, we will demonstrate the correct functions for retrieving your saved options throughout your plugin or theme, ensuring data persistence and integrity across updates.
Advanced reuse and efficiency: to maximize development speed, we will cover how to reuse existing sections from other core WooCommerce tabs when appropriate for your feature. We will also touch on how to handle dynamic fields and options that require real-time updates based on other settings, ensuring your custom option pages are as powerful as they are clean.
This webinar is vital for development professionals looking to improve the quality and user experience of their products:
- WooCommerce Plugin Developers & Extension Builders
- WooCommerce Theme Developers
- Freelance Developers building reusable client features
Stop struggling with custom forms and start leveraging the robust, native WooCommerce Settings API.
Video Recording
If you are a member, please log in.
Otherwise, here is why you should join the Club.
Documentation and Resources
- Official “Settings and config” documentation: https://developer.woocommerce.com/docs/category/settings-and-config/
- Business Bloomer tutorial: WooCommerce: Add Custom Tab @ WooCommerce Settings Page
Code Snippets Shared During the Class
Business Bloomer Tab
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 = 'bb_tab';
$this->label = 'BB Tab';
parent::__construct();
}
}
$settings[] = new WC_Settings_Custom_Tab();
}
return $settings;
}
add_filter( 'woocommerce_get_settings_bb_tab', 'bbloomer_custom_woocommerce_settings_tab_settings', 10, 2 );
function bbloomer_custom_woocommerce_settings_tab_settings( $settings, $current_section ) {
$settings = array(
array(
'title' => 'My plugin settings',
'desc' => 'This is where you can define the options for my plugin',
'type' => 'title',
),
array(
'name' => 'Custom price',
'type' => 'price',
'id' => 'custom_price',
'default' => '9.99',
'desc' => 'this is your custom price',
'desc_tip' => true,
'autoload' => false,
),
array(
'name' => 'Custom password',
'type' => 'password',
'id' => 'custom_password',
'desc' => 'this is your custom pwd',
'desc_tip' => true,
'autoload' => false,
),
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(
'name' => 'Custom select',
'type' => 'multiselect',
'id' => 'custom_tab_multiselect',
'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;
}
ChatGPT Tab
/**
* WooCommerce Custom Settings Tab + Fields
*/
// -----------------------------
// 1. Add the tab
// -----------------------------
add_filter( 'woocommerce_settings_tabs_array', 'bb_add_custom_settings_tab', 50 );
function bb_add_custom_settings_tab( $tabs ) {
$tabs['bb_custom'] = __( 'ChatGPT Tab', 'woocommerce' );
return $tabs;
}
// -----------------------------
// 2. Register settings fields
// -----------------------------
add_filter( 'woocommerce_settings_bb_custom', 'bb_custom_settings_fields' );
function bb_custom_settings_fields( $settings ) {
if ( ! is_array( $settings ) ) {
$settings = array(); // safety fallback
}
$settings[] = array(
'title' => __( 'My Custom Settings', 'woocommerce' ),
'type' => 'title',
'id' => 'bb_custom_settings_title'
);
// Checkbox
$settings[] = array(
'title' => __( 'Enable Feature', 'woocommerce' ),
'desc' => __( 'Check to enable', 'woocommerce' ),
'id' => 'bb_enable_feature',
'type' => 'checkbox',
'default' => 'no',
);
// Select
$settings[] = array(
'title' => __( 'Select Option', 'woocommerce' ),
'id' => 'bb_select_option',
'type' => 'select',
'default' => 'option1',
'options' => array(
'option1' => __( 'Option 1', 'woocommerce' ),
'option2' => __( 'Option 2', 'woocommerce' ),
'option3' => __( 'Option 3', 'woocommerce' ),
),
);
// Text
$settings[] = array(
'title' => __( 'Text Field', 'woocommerce' ),
'id' => 'bb_text_field',
'type' => 'text',
'default' => '',
'desc' => __( 'Enter text here.', 'woocommerce' ),
);
// Textarea
$settings[] = array(
'title' => __( 'Textarea Field', 'woocommerce' ),
'id' => 'bb_textarea_field',
'type' => 'textarea',
'default' => '',
'desc' => __( 'Enter longer text here.', 'woocommerce' ),
);
$settings[] = array(
'type' => 'sectionend',
'id' => 'bb_custom_settings_title'
);
return $settings;
}
// -----------------------------
// 3. Output fields
// -----------------------------
add_action( 'woocommerce_settings_tabs_bb_custom', 'bb_custom_settings_output' );
function bb_custom_settings_output() {
$settings = apply_filters( 'woocommerce_settings_bb_custom', array() );
woocommerce_admin_fields( $settings );
}
// -----------------------------
// 4. Save fields
// -----------------------------
add_action( 'woocommerce_update_options_bb_custom', 'bb_custom_settings_save' );
function bb_custom_settings_save() {
$settings = apply_filters( 'woocommerce_settings_bb_custom', array() );
woocommerce_update_options( $settings );
}
Claude Tab
/**
* Custom Settings Tab Class
*/
class WC_Settings_Tab_Custom {
/**
* Bootstraps the class and hooks required actions & filters.
*/
public static function init() {
add_filter('woocommerce_settings_tabs_array', __CLASS__ . '::add_settings_tab', 50);
add_action('woocommerce_settings_tabs_custom_tab', __CLASS__ . '::settings_tab');
add_action('woocommerce_update_options_custom_tab', __CLASS__ . '::update_settings');
}
/**
* Add a new settings tab to the WooCommerce settings tabs array.
*
* @param array $settings_tabs Array of WooCommerce setting tabs.
* @return array Modified array of WooCommerce setting tabs.
*/
public static function add_settings_tab($settings_tabs) {
$settings_tabs['custom_tab'] = __('Claude Tab', 'woocommerce');
return $settings_tabs;
}
/**
* Uses the WooCommerce admin fields API to output settings via the @see woocommerce_admin_fields() function.
*
* @uses woocommerce_admin_fields()
* @uses self::get_settings()
*/
public static function settings_tab() {
woocommerce_admin_fields(self::get_settings());
}
/**
* Uses the WooCommerce options API to save settings via the @see woocommerce_update_options() function.
*
* @uses woocommerce_update_options()
* @uses self::get_settings()
*/
public static function update_settings() {
woocommerce_update_options(self::get_settings());
}
/**
* Get all the settings for this plugin for @see woocommerce_admin_fields() function.
*
* @return array Array of settings for @see woocommerce_admin_fields() function.
*/
public static function get_settings() {
$settings = array(
'section_title' => array(
'name' => __('Custom Settings Section', 'woocommerce'),
'type' => 'title',
'desc' => __('This is your custom settings section description.', 'woocommerce'),
'id' => 'wc_custom_section_title'
),
'enable_feature' => array(
'name' => __('Enable Feature', 'woocommerce'),
'type' => 'checkbox',
'desc' => __('Enable this custom feature', 'woocommerce'),
'id' => 'wc_custom_enable_feature',
'default' => 'no',
),
'text_field' => array(
'name' => __('Text Field', 'woocommerce'),
'type' => 'text',
'desc' => __('Enter some text here', 'woocommerce'),
'id' => 'wc_custom_text_field',
'default' => '',
'css' => 'min-width:300px;',
),
'textarea_field' => array(
'name' => __('Textarea Field', 'woocommerce'),
'type' => 'textarea',
'desc' => __('Enter longer text here', 'woocommerce'),
'id' => 'wc_custom_textarea_field',
'default' => '',
'css' => 'min-width:300px;',
),
'select_field' => array(
'name' => __('Select Option', 'woocommerce'),
'type' => 'select',
'desc' => __('Choose an option', 'woocommerce'),
'id' => 'wc_custom_select_field',
'options' => array(
'option1' => __('Option 1', 'woocommerce'),
'option2' => __('Option 2', 'woocommerce'),
'option3' => __('Option 3', 'woocommerce'),
),
'default' => 'option1',
),
'number_field' => array(
'name' => __('Number Field', 'woocommerce'),
'type' => 'number',
'desc' => __('Enter a number', 'woocommerce'),
'id' => 'wc_custom_number_field',
'default' => '10',
'custom_attributes' => array(
'min' => '0',
'step' => '1',
),
),
'section_end' => array(
'type' => 'sectionend',
'id' => 'wc_custom_section_end'
)
);
return apply_filters('wc_custom_tab_settings', $settings);
}
}
// Initialize the settings tab
WC_Settings_Tab_Custom::init();
Gemini Tab
/**
* 1. Add the new tab to the WooCommerce Settings tabs array.
*/
add_filter( 'woocommerce_settings_tabs_array', 'gemini_add_settings_tab', 50 );
function gemini_add_settings_tab( $settings_tabs ) {
$settings_tabs['gemini_tab'] = __( 'Gemini Tab', 'woocommerce' );
return $settings_tabs;
}
/**
* 2. Define the settings fields.
* * We separate this into a function so we can use it for both
* rendering (displaying) and saving (processing).
*/
function gemini_get_settings() {
$settings = array(
'section_title' => array(
'name' => __( 'Gemini Global Options', 'woocommerce' ),
'type' => 'title',
'desc' => __( 'Configure the settings for the Gemini integration below.', 'woocommerce' ),
'id' => 'gemini_tab_section_title'
),
'api_key' => array(
'name' => __( 'API Key', 'woocommerce' ),
'type' => 'text',
'desc' => __( 'Enter your API key here.', 'woocommerce' ),
'desc_tip' => true,
'id' => 'gemini_api_key',
'css' => 'min-width:300px;',
),
'enable_feature' => array(
'name' => __( 'Enable Feature', 'woocommerce' ),
'type' => 'checkbox',
'desc' => __( 'Check this box to enable the custom feature.', 'woocommerce' ),
'id' => 'gemini_enable_feature',
'default' => 'yes'
),
'threshold_value' => array(
'name' => __( 'Threshold Limit', 'woocommerce' ),
'type' => 'number',
'desc' => __( 'Set the maximum threshold value.', 'woocommerce' ),
'id' => 'gemini_threshold',
'custom_attributes' => array(
'min' => 0,
'step' => 1
),
'default' => '10'
),
'section_end' => array(
'type' => 'sectionend',
'id' => 'gemini_tab_section_end'
)
);
return apply_filters( 'gemini_tab_settings', $settings );
}
/**
* 3. Render the settings fields on the tab.
* * This hooks into 'woocommerce_settings_tabs_{tab_id}'
*/
add_action( 'woocommerce_settings_tabs_gemini_tab', 'gemini_render_settings_tab' );
function gemini_render_settings_tab() {
woocommerce_admin_fields( gemini_get_settings() );
}
/**
* 4. Save the settings.
* * This hooks into 'woocommerce_update_options_{tab_id}'
*/
add_action( 'woocommerce_update_options_gemini_tab', 'gemini_save_settings_tab' );
function gemini_save_settings_tab() {
woocommerce_update_options( gemini_get_settings() );
}
Copilot Tab
// Add a custom WooCommerce settings tab with id "copilot_tab"
add_filter( 'woocommerce_settings_tabs_array', function( $tabs ) {
$tabs['copilot_tab'] = __( 'Copilot Tab', 'textdomain' );
return $tabs;
}, 50 );
// Display settings
add_action( 'woocommerce_settings_tabs_copilot_tab', function() {
woocommerce_admin_fields( get_copilot_settings() );
});
// Save settings
add_action( 'woocommerce_update_options_copilot_tab', function() {
woocommerce_update_options( get_copilot_settings() );
});
// Define settings
function get_copilot_settings() {
return array(
'section_title' => array(
'name' => __( 'Copilot Options', 'textdomain' ),
'type' => 'title',
'desc' => '',
'id' => 'copilot_section_title'
),
'enable_feature' => array(
'name' => __( 'Enable Feature', 'textdomain' ),
'type' => 'checkbox',
'desc' => __( 'Enable the Copilot feature.', 'textdomain' ),
'id' => 'copilot_enable_feature'
),
'text_option' => array(
'name' => __( 'Custom Text', 'textdomain' ),
'type' => 'text',
'desc' => __( 'Enter some custom text.', 'textdomain' ),
'id' => 'copilot_text_option'
),
'select_option' => array(
'name' => __( 'Select Option', 'textdomain' ),
'type' => 'select',
'options' => array(
'one' => __( 'Option One', 'textdomain' ),
'two' => __( 'Option Two', 'textdomain' ),
),
'id' => 'copilot_select_option'
),
'section_end' => array(
'type' => 'sectionend',
'id' => 'copilot_section_end'
),
);
}
More WooCommerce masterclasses
Here’s a list of free upcoming webinars and member-only class recordings (we usually take a break for June-August, otherwise you should expect about 2 classes per month). Make sure to attend live so you can interact with the teacher and the other attendees!
-
![[Enroll] WooCommerce Plugin Marketing 101: Your First 1,000 Users](https://www.businessbloomer.com/wp-content/uploads/2025/11/pexels-photo-1105666-1105666-150x150.jpg)
[Enroll] WooCommerce Plugin Marketing 101: Your First 1,000 Users
Live Class: FREE Recording: MEMBERS ONLY Most WooCommerce plugins never reach 1,000 active installs—but hitting that milestone is crucial for validating your product before going…
-
WooCommerce Settings API: Build Custom Option Pages
Stop cluttering the WordPress admin menu with separate settings pages! Learn to create professional, native-feeling custom tabs and options right inside the WooCommerce Settings interface.…
-
WooCommerce Database Walkthrough: Tables Explained
Tired of relying on guesswork when querying crucial WooCommerce data? This is your essential tour. We will walk you table-by-table through the WooCommerce database schema,…
-
From Woo Plugins to Shopify Apps Dev: Is it Worth it?
You’ve mastered WooCommerce plugin development. But is the scalable income of the Shopify App Store worth the pivot? This session provides a clear-eyed look at…
-
Avoid Costly Mistakes: Spotting WooCommerce Client Red Flags
Are you tired of projects that go over budget, clients who ghost, or customers who drain support? Bad clients — whether for consulting, development, or…
-
Classic vs Block: Add, Remove & Edit WooCommerce Checkout Fields
Let’s dive into the ins and outs of customizing WooCommerce checkout fields, comparing the Classic Checkout with the Checkout Block. You’ll see exactly what’s possible…
-
Behind the Scenes: The Making of Checkout Summit 2026
What does it really take to build a WooCommerce site that can handle a major international conference? For Checkout Summit 2026, I started with nothing…
-
Supercharge WooCommerce With Custom Product Options
Custom product options (“add-ons”) in WooCommerce can do much more than just add text boxes or checkboxes to the product page. In this class, we’ll…
-
Send These 7 WooCommerce Emails & Watch Sales Grow
Think email marketing is too complicated? Think again… If you’re only sending WooCommerce order emails, you’re leaving money on the table. With the right premium…
-
Spotting WooCommerce Conversion Rate Killers: A Live Audit
In this class, I’ll be auditing several live WooCommerce stores to identify and analyze conversion rate optimization (CRO) issues. Whether it’s slow checkout, poor product…
– BACKED BY –
Is your WooCommerce store prepared for traffic spikes? Improve speeds up to 200% with our managed WooCommerce hosting. Enjoy scalable server resources, rock-solid security, and 24/7 support.
