In WooCommerce, customization plays a key role in building a unique online store. However, navigating through multiple settings pages to manage WooCommerce configurations can feel overwhelming.
Now, imagine having all your WooCommerce options in one centralized, user-friendly interface. This setup would make managing your store’s settings—like general, products, shipping, payments, and advanced options—much more efficient.
In this tutorial, we’ll explore a method to consolidate all WooCommerce settings onto a single screen, so you can adjust everything you need in one place.
Let’s get started!
add_action( 'woocommerce_before_settings_general', 'wwccs_woo_settings_tabs_navbar_replacement' );
function wwccs_woo_settings_tabs_navbar_replacement() {
$tabs = apply_filters( 'woocommerce_settings_tabs_array', [] );
?>
<nav class="nav-tab-wrapper woo-nav-tab-wrapper infinite">
<?php
foreach ( $tabs as $slug => $label ) {
echo '<a href="#' . $slug . '" class="nav-tab">' . esc_html( $label ) . '</a>';
}
?>
</nav>
<style>
.woocommerce nav.woo-nav-tab-wrapper:not(.infinite) { display: none }
.woocommerce nav.woo-nav-tab-wrapper.infinite { background: Cornsilk; box-sizing: border-box; padding: 5px; position: sticky; top: 50px; z-index: 1001; margin: 0; width: calc(100% - 100px); }
</style>
<?php
}
add_action( 'woocommerce_after_settings_general', 'wwccs_display_settings_tabs_content_after_general_one' );
function wwccs_display_settings_tabs_content_after_general_one() {
$tabs = apply_filters( 'woocommerce_settings_tabs_array', [] );
unset( $tabs['general'] );
foreach ( $tabs as $current_tab => $label ) {
echo '<hr id="' . $current_tab . '">';
echo '<h1 style="text-transform:capitalize">' . $label . ' ' . __( 'Settings', 'woocommerce' ) . '</h1>';
// SAVE SETTINGS
if ( ! empty( $_POST[ 'save' . $current_tab ] ) ) {
check_admin_referer( 'woocommerce-settings' );
do_action( 'woocommerce_settings_save_' . $current_tab );
do_action( 'woocommerce_update_options_' . $current_tab );
do_action( 'woocommerce_update_options' );
update_option( 'woocommerce_queue_flush_rewrite_rules', 'yes' );
WC()->query->init_query_vars();
WC()->query->add_endpoints();
do_action( 'woocommerce_settings_saved' );
}
do_action( 'woocommerce_before_settings_' . $current_tab );
?>
<form method="<?php echo esc_attr( apply_filters( 'woocommerce_settings_form_method_tab_' . $current_tab, 'post' ) ); ?>" id="mainform<?php echo $current_tab; ?>" action="" enctype="multipart/form-data">
<?php
do_action( 'woocommerce_sections_' . $current_tab );
do_action( 'woocommerce_settings_' . $current_tab );
?>
<p class="submit">
<button name="save<?php echo $current_tab; ?>" class="woocommerce-save-button components-button is-primary" type="submit" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Save changes', 'woocommerce' ); ?></button>
<?php wp_nonce_field( 'woocommerce-settings' ); ?>
</p>
</form>
<?php
do_action( 'woocommerce_after_settings_' . $current_tab );
}
}