Woocommerce add sections inside the tabs

Question

I am doing a small plugin in woocommerce. In that Plugin I want to show section in the admin area just like shipping Options, Flat Rate, Free Shipping etc in the shipping tab of the woocommerce setting dashboard. First I have created a tab from plugin and inside that tab I want the sections. For creating tab I have taken code from this link So my code for the plugin goes like this

<?php
/**
 * Plugin Name: WooCommerce Settings Tab 
 * Plugin URI: http://www.wordpress.org
 * Description: Woocmmerce settings tab.
 * Author: Author Name
 * Author URI: http://www.wordpress.org
 * Version: 1.0
 *
 */

class WC_Settings_Tab {
    public static function init() {
        add_filter( 'woocommerce_settings_tabs_array', __CLASS__ . '::add_settings_tab', 50 );
        add_action( 'woocommerce_settings_tabs_settings_tab_demo', __CLASS__ . '::settings_tab' );
        add_action( 'woocommerce_update_options_settings_tab_demo', __CLASS__ . '::update_settings' );
        add_action( 'woocommerce_sections',__CLASS__ . '::get_sections');
    }

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

    public static function settings_tab() {
        woocommerce_admin_fields( self::get_settings() );
    }

    public static function update_settings() {
        woocommerce_update_options( self::get_settings() );
    }

      public function get_sections() {
        $sections = array(
          '' => __( 'Test Link 1', 'woocommerce' ),
          'testlink2' => __( 'Test Link 2', 'woocommerce' ),
        );

        return apply_filters( 'woocommerce_sections', $sections );
      }    

    public static function get_settings() {

        $settings = array(
            'section_title' => array(
                'name'     => __( 'Section Title', 'woocommerce-settings-tab-demo' ),
                'type'     => 'title',
                'desc'     => '',
                'id'       => 'wc_settings_tab_demo_section_title'
            ),
            'title' => array(
                'name' => __( 'Title', 'woocommerce-settings-tab-demo' ),
                'type' => 'text',
                'desc' => __( 'This is some helper text', 'woocommerce-settings-tab-demo' ),
                'id'   => 'wc_settings_tab_demo_title'
            ),
            'description' => array(
                'name' => __( 'Description', 'woocommerce-settings-tab-demo' ),
                'type' => 'textarea',
                'desc' => __( 'This is a paragraph describing the setting. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda.', 'woocommerce-settings-tab-demo' ),
                'id'   => 'wc_settings_tab_demo_description'
            ),
            'section_end' => array(
                 'type' => 'sectionend',
                 'id' => 'wc_settings_tab_demo_section_end'
            )
        );

        return apply_filters( 'wc_settings_tab_demo_settings', $settings );
    }

}

WC_Settings_Tab::init();

But it is not showing the sections. So can someone kindly tell me how to add sections in the woocommerce settings tab? Any help and suggestions will be really appreciable.

Answer 1

I tried to answer this question 2x already. I have sections working in my plugin, but as you are finding it was a beast to work out. The best example is how the shipping/payment gateways are added... if you have access to any of those. And that kind of depends on if you are making something that you want to be extensible in the way that those are.

Anyway, because I could barely figure out the code I was using I tried to condense it down into 1 file that controlled all the sections.

First load the settings file.

add_filter( 'woocommerce_get_settings_pages', 'so_26355697_add_settings_page' );
function so_26355697_add_settings_page( $settings ) {
    $settings[] = include( 'wc-plugin-settings.php' );  
    return $settings;
}

And then in the wc-plugin-settings.php file (Which must return a class object)...

class WC_Settings_My_Plugin extends WC_Settings_Page {

    /**
     * Constructor
     */
    public function __construct() {

        $this->id    = 'demo_plugin';

        add_filter( 'woocommerce_settings_tabs_array', array( $this, 'add_settings_tab' ), 50 );
        add_action( 'woocommerce_sections_' . $this->id, array( $this, 'output_sections' ) );
        add_action( 'woocommerce_settings_' . $this->id, array( $this, 'output' ) );
        add_action( 'woocommerce_settings_save_' . $this->id, array( $this, 'save' ) );

    }

    /**
     * Add plugin options tab
     *
     * @return array
     */
    public function add_settings_tab( $settings_tabs ) {
        $settings_tabs[$this->id] = __( 'Settings Demo Tab', 'woocommerce-settings-tab-demo' );
        return $settings_tabs;
    }

    /**
     * Get sections
     *
     * @return array
     */
    public function get_sections() {

        $sections = array(
            'section-0'         => __( 'Plugin Options', 'woocommerce-settings-tab-demo' ),
            'section-1'         => __( 'Section 1', 'woocommerce-settings-tab-demo' ),
            'section 2'         => __( 'Section 2', 'woocommerce-settings-tab-demo' ),

        );

        return apply_filters( 'woocommerce_get_sections_' . $this->id, $sections );
    }


    /**
     * Get sections
     *
     * @return array
     */
    public function get_settings( $section = null ) {

        switch( $section ){

            case 'section-0' :
                $settings = array(
                    'section_title' => array(
                        'name'     => __( 'Main Section Title', 'woocommerce-settings-tab-demo' ),
                        'type'     => 'title',
                        'desc'     => '',
                        'id'       => 'wc_settings_tab_demo_title_section-1'
                    ),
                    'title' => array(
                        'name' => __( 'Main Title', 'woocommerce-settings-tab-demo' ),
                        'type' => 'text',
                        'desc' => __( 'This is some helper text', 'woocommerce-settings-tab-demo' ),
                        'id'   => 'wc_settings_tab_demo_title_section-1'
                    ),
                    'description' => array(
                        'name' => __( 'Main Description', 'woocommerce-settings-tab-demo' ),
                        'type' => 'textarea',
                        'desc' => __( 'This is a paragraph describing the setting. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda.', 'woocommerce-settings-tab-demo' ),
                        'id'   => 'wc_settings_tab_demo_description_section-1'
                    ),
                    'section_end' => array(
                         'type' => 'sectionend',
                         'id' => 'wc_settings_tab_demo_end-section-1'
                    )
                );

            break;
            case 'section-1':
                $settings = array(
                    'section_title' => array(
                        'name'     => __( 'Section One Title', 'woocommerce-settings-tab-demo' ),
                        'type'     => 'title',
                        'desc'     => '',
                        'id'       => 'wc_settings_tab_demo_section_title_section-2'
                    ),
                    'title' => array(
                        'name' => __( 'Section One Title', 'woocommerce-settings-tab-demo' ),
                        'type' => 'text',
                        'desc' => __( 'This is some helper text', 'woocommerce-settings-tab-demo' ),
                        'id'   => 'wc_settings_tab_demo_title_section-2'
                    ),
                    'description' => array(
                        'name' => __( 'Section One Description', 'woocommerce-settings-tab-demo' ),
                        'type' => 'textarea',
                        'desc' => __( 'This is a paragraph describing the setting. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda.', 'woocommerce-settings-tab-demo' ),
                        'id'   => 'wc_settings_tab_demo_description_section-2'
                    ),
                    'section_end' => array(
                         'type' => 'sectionend',
                         'id' => 'wc_settings_tab_demo_section_end_section-2'
                    )
                );
            break;
            case 'section-2':
                $settings = array(
                    'section_title' => array(
                        'name'     => __( 'Section Two Title', 'woocommerce-settings-tab-demo' ),
                        'type'     => 'title',
                        'desc'     => '',
                        'id'       => 'wc_settings_tab_demo_section_title'
                    ),
                    'title' => array(
                        'name' => __( 'Section Two Title', 'woocommerce-settings-tab-demo' ),
                        'type' => 'text',
                        'desc' => __( 'This is some helper text', 'woocommerce-settings-tab-demo' ),
                        'id'   => 'wc_settings_tab_demo_title'
                    ),
                    'description' => array(
                        'name' => __( 'Section Two Description', 'woocommerce-settings-tab-demo' ),
                        'type' => 'textarea',
                        'desc' => __( 'This is a paragraph describing the setting. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda.', 'woocommerce-settings-tab-demo' ),
                        'id'   => 'wc_settings_tab_demo_description'
                    ),
                    'section_end' => array(
                         'type' => 'sectionend',
                         'id' => 'wc_settings_tab_demo_section_end'
                    )
                );


            break;

        }

        return apply_filters( 'wc_settings_tab_demo_settings', $settings, $section );

    }

    /**
     * Output the settings
     */
    public function output() {
        global $current_section;
        $settings = $this->get_settings( $current_section );
        WC_Admin_Settings::output_fields( $settings );
    }


    /**
     * Save settings
     */
    public function save() {
        global $current_section;
        $settings = $this->get_settings( $current_section );
        WC_Admin_Settings::save_fields( $settings );
    }

}

return new WC_Settings_My_Plugin();

As I said, this is not exactly how Woo is doing it, nor even how I am doing it in my own code. BUT, I think it is the simplest approach. If you need something that can be extended, this won't be appropriate but that is also much harder to write.