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:

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.

2 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.