In my new role as a WooCommerce Developer I've been spending a good chunk of time auditing 3rd party extensions. One of the surprising parts about the audit process is seeing where developers put their settings. Some developers put them under Settings, some put them under a custom menu item, and some just shimmy it in wherever they can.
If you're building a WooCommerce extension the easiest thing you can do to improve your UI is to put all WooCommerce settings where users can find them – on a new WooCommerce settings tab. Sounds pretty easy but you'd be surprised how many people don't do that.
TLDR: example code at the bottom.
Adding a shiny new WooCommerce settings tab only takes three small steps:
- Add your new tab to the array of existing tabs
- Create an array of settings and pass them to the output function
- Pass that same array to the save settings function
1 – Add a New WooCommerce Settings Tab
The first thing you have to do is add a new settings tab. This is actually pretty easy. You just need to add one extra array item to the woocommerce_settings_tabs_array filter.
2 – Add Your Settings to the Settings Tab
That creates a brand new tab for you to use. Now you need to populate it with settings. There's a handy function, woocommerce_admin_fields, that you can call and pass in an array of settings. There's a trick here that you can use to make the next step easier. Create one function that only returns your array of settings and then another function that calls the woocommerce_admin_fields function. You'll thank me in the next step.
You'll see below that I'm passing in four “settings”. Two of them are actual settings, one it a title, and one is a section end. You'll want to look through output_fields() in class-wc-admin-settings.php to see all of the available options.
It should look something like this:
3 – Save Your Settings
So by now you should be able to see your settings on your brand new tab. But if you press the save button you'll notice nothing happens. You still need to hook up the save functionality. Hopefully you took my advice in the last section and you created a separate function which returns an array of settings you just need to pass that exact same array into a save function, woocommerce_update_options().
Wrapping it all up
There's really only three steps to this whole process. If you followed along you're all done. Go ahead and replace my dummy settings with your actual settings. I have a complete version here if you had any trouble following along (or if you're lazy and you skipped to the bottom of the page) 🙂