Créez une page de paramètres WooCommerce personnalisée avec des sections dédiées

Question

J'essaie d'ajouter un onglet de paramètres personnalisés à l'écran des paramètres de WooCommerce. Fondamentalement, je souhaite obtenir des fonctionnalités similaires à l'onglet Paramètres du produit via des sous-sections/sous-onglets :

Je n'ai trouvé aucune documentation décente sur la façon de procéder, mais j'ai pu ajouter un onglet personnalisé à l'aide de l'extrait suivant :

class WC_Settings_Tab_Demo {

    public static function init() {
        add_filter( 'woocommerce_settings_tabs_array', __CLASS__ . '::add_settings_tab', 50 );
    }

    public static function add_settings_tab( $settings_tabs ) {
        $settings_tabs['test'] = __( 'Settings Demo Tab', 'woocommerce-settings-tab-demo' );
        return $settings_tabs;
    }
}
WC_Settings_Tab_Demo::init();

Sur la base de ce que j'ai trouvé dans divers fils de discussion/tutoriels, j'ai essayé d'ajouter des sections/sous-onglets à un nouvel onglet de paramètres comme celui-ci :

// creating a new sub tab in API settings
add_filter( 'woocommerce_get_sections_test','add_subtab' );
function add_subtab( $sections ) {
    $sections['custom_settings'] = __( 'Custom Settings', 'woocommerce-custom-settings-tab' );
    $sections['more_settings'] = __( 'More Settings', 'woocommerce-custom-settings-tab' );
    return $sections;
}


// adding settings (HTML Form)
add_filter( 'woocommerce_get_settings_test', 'add_subtab_settings', 10, 2 );
function add_subtab_settings( $settings, $current_section ) {
    // $current_section = (isset($_GET['section']) && !empty($_GET['section']))? $_GET['section']:'';
    if ( $current_section == 'custom_settings' ) {
        $custom_settings = array();
        $custom_settings[] = array( 'name' => __( 'Custom Settings', 'text-domain' ),
                                   'type' => 'title',
                                   'desc' => __( 'The following options are used to ...', 'text-domain' ),
                                   'id' => 'custom_settings'
                                  );

        $custom_settings[] = array(
                                    'name'     => __( 'Field 1', 'text-domain' ),
                                    'id'       => 'field_one',
                                    'type'     => 'text',
                                    'default'  => get_option('field_one'),

                                );

        $custom_settings[] = array( 'type' => 'sectionend', 'id' => 'test-options' );
        return $custom_settings;
    } else {
        // If not, return the standard settings
        return $settings;
    }
}

J'ai pu ajouter de nouvelles sous-sections à l'onglet Produits en utilisant un code similaire à celui ci-dessus, mais cela ne fonctionne pas avec mon nouvel onglet personnalisé. Où est-ce que je me suis trompé?

Answer 1

1) Pour ajouter un onglet de paramètres avec des sections, vous pouvez d'abord utiliser le woocommerce_settings_tabs_array crochet de filtre :

// 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 );

2) Pour ajouter une nouvelle section à la page, vous pouvez utiliser woocommerce_sections_{$current_tab} 复合挂钩，其中 {$current_tab}Doit être remplacé par le slug de clé défini dans la première fonction :

// 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 '

'; $array_keys = array_keys( $sections ); foreach ( $sections as $id => $label ) { echo '
• ' . $label . ' ' . ( end( $array_keys ) == $id ? '' : '|' ) . '
'; } echo '

'; } add_action( 'woocommerce_sections_my-custom-tab', 'action_woocommerce_sections_my_custom_tab', 10 );

---

3)Pour ajouter des paramètres ainsi que le traitement/sauvegarde, nous utiliserons une fonction personnalisée puis appellerons cette fonction :

// 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;
}

3.1) Ajouter des paramètres via woocommerce_settings_{$current_tab} crochet composé :

// 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 );

3.2) Gérer/enregistrer les paramètres via woocommerce_settings_save_{$current_tab} crochet composé :

// 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 );

---

Résultat :

---

Basé sur :

• Implémenter une page de paramètres WooCommerce personnalisée, y compris une section de page
• woocommerce/includes/admin/settings/一个>