WooCommerce by default adds the following items to the account page:

  • Dashboard
  • Orders
  • Downloads
  • Addresses
  • Account details
  • Logout


If you want to add a new item to the WooCommerce account page, you can use the following ready-to-use 4 code snippets in your theme’s (preferably child theme’s) functions.php file. Note that you’ll need to add all 4 code snippets below. Categorization is only for readability. Here are other ways of adding custom code snippets to your site.


1. Registering new item endpoint

add_action( 'init', 'register_new_item_endpoint');

/**
 * Register New Endpoint.
 *
 * @return void.
 */
function register_new_item_endpoint() {
	add_rewrite_endpoint( 'new-item', EP_ROOT | EP_PAGES );
}


2. Query Vars

add_filter( 'query_vars', 'new_item_query_vars' );

/**
 * Add new query var.
 *
 * @param array $vars vars.
 *
 * @return array An array of items.
 */
function new_item_query_vars( $vars ) {

	$vars[] = 'new-item';
	return $vars;
}


3. Add New Item

add_filter( 'woocommerce_account_menu_items', 'add_new_item_tab' );

/**
 * Add New tab in my account page.
 *
 * @param array $items myaccount Items.
 *
 * @return array Items including New tab.
 */
function add_new_item_tab( $items ) {

	$items['new-item'] = 'New Item';
	return $items;
}


4. Add Contents To The New Item

add_action( 'woocommerce_account_new-item_endpoint', 'add_new_item_content' );

/**
 * Add content to the new tab.
 *
 * @return  string.
 */
function add_new_item_content() {
	echo 'New Item Contents here!';
}


Once you’ve added these snippets, make sure to refresh the permalinks by going to Settings > Permalinks.


That’s it. I hope you found this helpful.

If you want to add a ‘Delete Account’ tab on the accounts page to allow users to delete their own account, you do not need to use any code snippets. There’s a built-in plugin WP Frontend Delete Account for you.


Output from the Twenty Twenty One theme





FAQ

  1. How can I reorder the account items?
/**
 * Reorder account items.
 * 
 * @return array Ordered Items.
 */
function reorder_account_menu( $items ) {
    return array(
	        'dashboard'          => __( 'Dashboard', 'woocommerce' ),
	        'orders'             => __( 'Orders', 'woocommerce' ),
	        'downloads'          => __( 'Downloads', 'woocommerce' ),
	        'edit-account'       => __( 'Edit Account', 'woocommerce' ),
	        'new-item'           => __( 'New Item', 'woocommerce' ),
	        'edit-address'       => __( 'Addresses', 'woocommerce' ),
	        'customer-logout'    => __( 'Logout', 'woocommerce' ),
    );

}
add_filter ( 'woocommerce_account_menu_items', 'reorder_account_menu' );

This puts “New Item” before the “Edit Addresses” and “Logout” Items. Adjust wherever necessary and enjoy. 🙂

Add a new custom tab in the WooCommerce account page
Tagged on:

Leave a Reply

Your email address will not be published.

Pin It on Pinterest