WooCommerce “Save Changes” button appears inside custom settings

I am writing WooCommerce plugin which requires custom settings page. I have decided to extend general WooCommerce settings by adding new custom tab. I have managed how to do it in WooCommerce way and everything looks fine. However when I try to render my settings, the Save Changes button is rendered incorrectly.

Here is how it looks like:

Read More

enter image description here

And here is test plugin:

<?php
/**
 * Plugin Name: WooCommerce Settings Bug
 */

add_action( 'woocommerce_settings_start', 'wpse8170_register_settings' );
function wpse8170_register_settings() {
    global $woocommerce_settings;

    $woocommerce_settings['test'] = array(
        array( 'type' => 'title', 'title' => __( 'My Test Options', 'wc-loyal-customer' ), 'desc' => '', 'id' => 'test-options' ),

        array(
            'title'    => __( 'Enable Test', 'some-text-domain' ),
            'desc'     => __( 'Enable test options', 'some-text-domain' ),
            'id'       => 'test_option',
            'type'     => 'checkbox',
            'default'  => 'yes',
        ),
    );
}

add_filter( 'woocommerce_settings_tabs_array', 'wpse8170_register_settings_tab', PHP_INT_MAX );
function wpse8170_register_settings_tab( $tabs ) {
    $tabs['test'] = esc_html__( 'Test tab', 'some-text-domain' );
    return $tabs;
}

add_action( 'woocommerce_settings_tabs_test', 'wpse8170_render_settings_page' );
function wpse8170_render_settings_page() {
    global $woocommerce_settings, $current_tab;
    woocommerce_admin_fields( $woocommerce_settings[$current_tab] );
}

It is quite simple example, but works improperly… What am I doing wrong?

Related posts

1 comment

  1. Ok, the fix is quite easy, although not obvious at all. All we need to do is just add array( 'type' => 'sectionend', 'id' => 'test-options' ), to the end of the settings group. So the final function should look like this:

    add_action( 'woocommerce_settings_start', 'wpse8170_register_settings' );
    function wpse8170_register_settings() {
        global $woocommerce_settings;
    
        $woocommerce_settings['test'] = array(
            array( 'type' => 'title', 'title' => __( 'My Test Options', 'wc-loyal-customer' ), 'desc' => '', 'id' => 'test-options' ),
    
            array(
                'title'    => __( 'Enable Test', 'some-text-domain' ),
                'desc'     => __( 'Enable test options', 'some-text-domain' ),
                'id'       => 'test_option',
                'type'     => 'checkbox',
                'default'  => 'yes',
            ),
    
            array( 'type' => 'sectionend', 'id' => 'test-options' ),
        );
    }
    

Comments are closed.