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:
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?
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: