From some time, WooCommerce uses a tabbed layout for the page My Account.
It shows the navigation on the left, and the content on the right.
Editing and removing tabs it’s relatively simple, but adding new tabs is a completely different thing.
Let’s learn in this tutorial how to do it!
We will need to use a class that extends WC_Query, the WooCommerce core class that edits the WordPress query.
Open the file functions.php in wp-content/themes/your-child-theme-name/ and add this code at the end:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class WC_Custom_My_Account_Tabs extends WC_Query { | |
| /** | |
| * Adds main filters and actions and inits the endpoints. | |
| */ | |
| public function __construct() { | |
| add_action( 'init', array( $this, 'add_endpoints' ) ); | |
| if ( ! is_admin() ) { | |
| add_filter( 'query_vars', array( $this, 'add_query_vars' ), 0 ); | |
| add_filter( 'woocommerce_account_menu_items', array( $this, 'edit_navigation' ) ); | |
| add_action( 'woocommerce_account_custom_endpoint', array( $this, 'add_custom_tab_content' ) ); | |
| } | |
| $this->init_query_vars(); | |
| } | |
| /** | |
| * Inits the query vars for WooCommerce | |
| */ | |
| public function init_query_vars() { | |
| $this->query_vars = array( | |
| 'custom' => 'custom', | |
| ); | |
| } | |
| /** | |
| * Edits the navigation in the page My Account, removing, editing and adding new tabs. | |
| * | |
| * @param array $items | |
| * @return array | |
| */ | |
| public function edit_navigation( $items ) { | |
| // Remove tabs | |
| unset( $items['downloads'] ); | |
| // Rename tabs | |
| $items['edit-address'] = 'My Custom Title'; | |
| // Add tabs | |
| $items['custom'] = 'Custom Tab'; | |
| return $items; | |
| } | |
| /** | |
| * Prints the custom tab content from a template in theme-name/woocommerce/myaccount/ | |
| */ | |
| public function add_custom_tab_content() { | |
| wc_get_template( 'myaccount/custom.php', array(), '', get_stylesheet() . 'woocommerce/' ); | |
| } | |
| } | |
| new WC_Custom_My_Account_Tabs(); |
The __construct method runs all the hooks and inits the query vars for WooCommerce.
The method init_query_vars inits the new tabs endpoint, otherwise they won’t work and return a 404.
The method edit_navigation instead is the main one, used to edit and remove tabs, or to add new ones.
The last method, add_custom_tab_content, prints the content of the new custom tab. Be careful with this one, I want you to notice something.
If you have a look at the constructor you will find this hook:
add_action( 'woocommerce_account_custom_endpoint', array( $this, 'add_custom_tab_content' ) );
This hook format is woocommerce_account_{$endpoint_name}_endpoint. If you want to add new tabs, make sure to add another hook like this and then change the part {$endpoint_name} with your endpoint name.
Also create another method like add_custom_tab_content, change its name and change the template loaded by wc_get_template.
Leave a Reply