How to Add Custom Settings Tabs in WooCommerce

Integrating your plugin or custom logic directly into the WooCommerce settings menu provides a seamless experience for store administrators. Instead of creating a separate top-level admin menu, you can inject a custom tab into the existing WooCommerce > Settings screen using the built-in WooCommerce Settings API.

Implementing the Settings Tab

We’ll use three primary hooks: woocommerce_settings_tabs_array to register the tab, woocommerce_settings_tabs_{tab_id} to display the fields, and woocommerce_update_options_{tab_id} to save the data.

class My_Custom_WC_Settings {

    public function __construct() {
        add_filter( 'woocommerce_settings_tabs_array', [ $this, 'add_settings_tab' ], 50 );
        add_action( 'woocommerce_settings_tabs_my_custom_tab', [ $this, 'settings_tab_content' ] );
        add_action( 'woocommerce_update_options_my_custom_tab', [ $this, 'update_settings' ] );
    }

    public function add_settings_tab( $settings_tabs ) {
        $settings_tabs['my_custom_tab'] = __( 'Custom Features', 'text-domain' );
        return $settings_tabs;
    }

    public function settings_tab_content() {
        woocommerce_admin_fields( $this->get_settings() );
    }

    public function update_settings() {
        woocommerce_update_options( $this->get_settings() );
    }

    public function get_settings() {
        return [
            'section_title' => [
                'name'     => __( 'My Feature Configuration', 'text-domain' ),
                'type'     => 'title',
                'id'       => 'my_feature_section_title'
            ],
            'api_key' => [
                'name' => __( 'API Key', 'text-domain' ),
                'type' => 'text',
                'id'   => 'my_feature_api_key',
                'desc' => __( 'Enter your integration key here.', 'text-domain' ),
            ],
            'section_end' => [
                'type' => 'sectionend',
                'id'   => 'my_feature_section_end'
            ],
        ];
    }
}

new My_Custom_WC_Settings();

Retrieving the Values

Once saved, these settings are stored in the standard WordPress wp_options table. You can retrieve them anywhere in your code using the standard get_option() function:

$api_key = get_option( 'my_feature_api_key' );

By using the native WooCommerce API, your settings look and feel like a core part of the platform, reducing the learning curve for users and maintaining a clean backend interface.