custom Woocommerce setting page with page section creation involves a bit of coding in WordPress. Below is a simplified guide to help you achieve this. Keep in mind that this is a basic example, and you may need to customize it further based on your specific requirements.

To add a setting tab with sections in WooCommerce, you can utilize the woocommerce_settings_tabs_array filter hook. This hook enables you to extend the array of setting tabs, allowing you to incorporate custom sections seamlessly into the WooCommerce settings interface. By leveraging this filter, you can efficiently organize and present your additional settings within distinct tabs, enhancing the user experience.

// Add the tab to the tabs array
function filter_woocommerce_settings_tabs_array( $settings_tabs ) {
    $settings_tabs['my-custom-tab'] = __( 'My custom tab', 'woocommerce' );

    return $settings_tabs;
}
add_filter( 'woocommerce_settings_tabs_array', 'filter_woocommerce_settings_tabs_array', 99 );

To seamlessly add new sections to a WooCommerce settings page, utilize the woocommerce_sections_{$current_tab} composite hook, replacing {$current_tab} with the key slug established in the initial function using the woocommerce_settings_tabs_array filter. This hook allows you to dynamically extend specific tab sections, enabling a modular and organized approach to incorporating additional settings based on the selected tab. By leveraging this composite hook, you can efficiently customize the content and structure of individual tabs within the WooCommerce settings interface.

// Add new sections to the page
function action_woocommerce_sections_my_custom_tab() {
    global $current_section;

    $tab_id = 'my-custom-tab';

    // Must contain more than one section to display the links
    // Make first element's key empty ('')
    $sections = array(
        ''              => __( 'Overview', 'woocommerce' ),
        'my-section-1'  => __( 'My section 1', 'woocommerce' ),
        'my-section-2'  => __( 'My section 2', 'woocommerce' )
    );

    echo '<ul class="subsubsub">';

    $array_keys = array_keys( $sections );

    foreach ( $sections as $id => $label ) {
        echo '<li><a href="' . admin_url( 'admin.php?page=wc-settings&tab=' . $tab_id . '&section=' . sanitize_title( $id ) ) . '" class="' . ( $current_section == $id ? 'current' : '' ) . '">' . $label . '</a> ' . ( end( $array_keys ) == $id ? '' : '|' ) . ' </li>';
    }

    echo '</ul><br class="clear" />';
}
add_action( 'woocommerce_sections_my-custom-tab', 'action_woocommerce_sections_my_custom_tab', 10 );

To streamline the addition and processing/saving of settings in WooCommerce, create a custom function that encapsulates these tasks. Once the custom function is defined, call it appropriately within the settings page implementation, ensuring a clear and organized structure for managing user preferences and seamlessly integrating with the WooCommerce environment. This modular approach enhances code maintainability and readability throughout the settings customization process.

// Settings function
function get_custom_settings() {
    global $current_section;

    $settings = array();

    if ( $current_section == 'my-section-1' ) {

        // My section 1
        $settings = array(

            // Title
            array(
                'title'     => __( 'Your title 1', 'woocommerce' ),
                'type'      => 'title',
                'id'        => 'custom_settings_1'
            ),

            // Text
            array(
                'title'     => __( 'Your title 1.1', 'text-domain' ),
                'type'      => 'text',
                'desc'      => __( 'Your description 1.1', 'woocommerce' ),
                'desc_tip'  => true,
                'id'        => 'custom_settings_1_text',
                'css'       => 'min-width:300px;'
            ),

            // Select
            array(
                'title'     => __( 'Your title 1.2', 'woocommerce' ),
                'desc'      => __( 'Your description 1.2', 'woocommerce' ),
                'id'        => 'custom_settings_1_select',
                'class'     => 'wc-enhanced-select',
                'css'       => 'min-width:300px;',
                'default'   => 'aa',
                'type'      => 'select',
                'options'   => array(
                    'aa'        => __( 'aa', 'woocommerce' ),
                    'bb'        => __( 'bb', 'woocommerce' ),
                    'cc'        => __( 'cc', 'woocommerce' ),
                    'dd'        => __( 'dd', 'woocommerce' ),
                ),
                'desc_tip' => true,
            ),

            // Section end
            array(
                'type'      => 'sectionend',
                'id'        => 'custom_settings_1'
            ),
        );
    
    } elseif ( $current_section == 'my-section-2' ) {

        // My section 2
        $settings = array(

            // Title
            array(
                'title'     => __( 'Your title 2', 'woocommerce' ),
                'type'      => 'title',
                'id'        => 'custom_settings_2'
            ),

            // Text
            array(
                'title'     => __( 'Your title 2.2', 'text-domain' ),
                'type'      => 'text',
                'desc'      => __( 'Your description 2.1', 'woocommerce' ),
                'desc_tip'  => true,
                'id'        => 'custom_settings_2_text',
                'css'       => 'min-width:300px;'
            ),

            // Section end
            array(
                'type'      => 'sectionend',
                'id'        => 'custom_settings_2'
            ),
        );
    
    } else {
        // Overview
        $settings = array(

            // Title
            array(
                'title'     => __( 'Overview', 'woocommerce' ),
                'type'      => 'title',
                'id'        => 'custom_settings_overview'
            ),

            // Section end
            array(
                'type'      => 'sectionend',
                'id'        => 'custom_settings_overview'
            ),
        );
    }

    return $settings;
}

To incorporate settings into a specific tab on the WooCommerce settings page, use the woocommerce_settings_{$current_tab} composite hook. By leveraging this hook, you can efficiently inject custom settings into the designated tab, facilitating a modular and organized approach to tailoring WooCommerce settings based on the user’s chosen tab.

// Add settings
function action_woocommerce_settings_my_custom_tab() {
    // Call settings function
    $settings = get_custom_settings();

    WC_Admin_Settings::output_fields( $settings );  
}
add_action( 'woocommerce_settings_my-custom-tab', 'action_woocommerce_settings_my_custom_tab', 10 );

To handle the processing and saving of settings in WooCommerce, utilize the woocommerce_settings_save_{$current_tab} composite hook. This hook allows you to implement custom logic for saving settings specific to the currently selected tab, ensuring a streamlined and organized approach to persisting user preferences within the WooCommerce settings interface.

// Process save the settings
function action_woocommerce_settings_save_my_custom_tab() {
    global $current_section;

    $tab_id = 'my-custom-tab';

    // Call settings function
    $settings = get_custom_settings();

    WC_Admin_Settings::save_fields( $settings );

    if ( $current_section ) {
        do_action( 'woocommerce_update_options_' . $tab_id . '_' . $current_section );
    }
}
add_action( 'woocommerce_settings_save_my-custom-tab', 'action_woocommerce_settings_save_my_custom_tab', 10 );

if you are facing any wooocommerce checkout blocks problem please check it our new article about integration of Woocommerce Payment Gateways with Woocommerce Checkout Blocks support