How to Customize in My Account Page in WooCommerce

How-to-Customize-in-My-Account-Page-in-WooCommerce
608 Views
3.1
(237)

If you’re looking for a quick and easy way to add new menu items to your WooCommerce My Account page ( how to edit woocommerce my account page ), we’ll show you how to do it right here.

In this approach, we’ll make use of two WooCommerce hooks to add the menu item and then add the redirect for the newly added page with the appropriate URL.

Remove My Account Menu Links

It is most likely the simplest section of this course. For instance, suppose that our online store only sells digital goods. In that case, perhaps we do not need the Orders part (yes, I am aware that the Orders details are also included, but we are still learning). The WooCommerce my account menu’s Downloads can also be something you want to delete. Each is feasible.

<?php
add_filter( 'woocommerce_account_menu_items', 'cxc_remove_my_account_links' );
function cxc_remove_my_account_links( $menu_links ){

	unset( $menu_links[ 'orders' ] ); // Remove Orders
	
	//unset( $menu_links[ 'edit-address' ] ); // Addresses
	//unset( $menu_links[ 'dashboard' ] ); // Remove Dashboard
	//unset( $menu_links[ 'payment-methods' ] ); // Remove Payment Methods
	//unset( $menu_links[ 'downloads' ] ); // Disable Downloads
	//unset( $menu_links[ 'edit-account' ] ); // Remove Account details tab
	//unset( $menu_links[ 'customer-logout' ] ); // Remove Logout link
	
	return $menu_links;
	
}
?>

How to delete endpoints such that the deleted pages return 404

It was very easy, but we’re not quite done; if you go right to /my-account/orders/, it will display the Addresses page. It shouldn’t happen like this, right?

The problem is, you don’t need any coding when you wish to remove both the menu item and its page. All of the My Account default subpages can be found under WooCommerce > Settings > Advanced. All you have to do is make a particular endpoint empty.

Rename My Account Menu Links 

The second way to dynamically rename the My Account page is to use certain WooCommerce hooks. You’ll need a basic grasp of how hooks function in WooCommerce for this.

<?php
add_filter( 'woocommerce_account_menu_items', 'cxc_rename_orders_call_back' );
function cxc_rename_orders_call_back( $menu_links ){
	
	// $menu_links[ 'TAB ID HERE' ] = 'NEW TAB NAME HERE';
	$menu_links[ 'orders' ] = 'Cxc Bulk Orders';

	return $menu_links;
}
?>

Change My Account Menu Items Order 

Ordering menu items on my account is as simple as rearranging array elements. Therefore, your $menu_links might appear as follows if you didn’t add or remove any custom menu links there:

<?php
add_filter( 'woocommerce_account_menu_items', 'cxc_orders_menu_links_reorder' );
function cxc_orders_menu_links_reorder( $menu_links ){
	
	return array(
		'orders' => __( 'Cxc Bulk Orders', 'woocommerce' ),
		'dashboard' => __( 'Dashboard', 'woocommerce' ),
		'downloads' => __( 'Downloads', 'mishadomain' ),
		'edit-address' => __( 'Addresses', 'woocommerce' ),
		'edit-account' => __( 'Account details', 'woocommerce' ),
		'customer-logout' => __( 'Sing Out!', 'woocommerce' )
	);

}
?>

Add Custom Page in My Account 

I’ll just give you the ready-to-use code to make things simpler; you can add it to the functions.php file of your current theme.

<?php
// add custom tab menu link
add_filter ( 'woocommerce_account_menu_items', 'cxc_custom_tab_link', 40 );
function cxc_custom_tab_link( $menu_links ){
	
	$menu_links = array_slice( $menu_links, 0, 5, true ) 
	+ array( 'custom-tab' => 'Cxc Custom Tab' )
	+ array_slice( $menu_links, 5, NULL, true );
	
	return $menu_links;

}

// init check register permalink endpoint
add_action( 'init', 'cxc_custom_tab_add_endpoint' );
function cxc_custom_tab_add_endpoint() {

	add_rewrite_endpoint( 'custom-tab', EP_PAGES );

}

// content for the new page in My Account, woocommerce_account_{ENDPOINT NAME}_endpoint
add_action( 'woocommerce_account_custom-tab_endpoint', 'cxc_my_account_endpoint_content' );
function cxc_my_account_endpoint_content() {

	// of course you can print dynamic content here, one of the most useful functions here is get_current_user_id()
	echo 'Cxc says you can create your custom HTML here :)';

}
?>

Conclusion

Overall, the default My Account page provides customers with the necessary information, but it is somewhat simple. So, if you want to improve your store’s customer experience, you should change the My Account page.

We’ve seen various instances of things you can accomplish with both techniques in this guide. We propose that you utilize these scripts as a reference, gain some ideas, and experiment to make the most of your website’s My Account page.

How useful was this blog?

Click on a star to rate it!

Average rating 3.1 / 5. Vote count: 237

No votes so far! Be the first to rate this blog.

  • CodexCoach

    - Web Development Expert

    CodexCoach is a skilled tech educator known for easy-to-follow tutorials in coding, digital design, and software development. With practical tips and interactive examples, CodexCoach helps people learn new tech skills and advance their careers.

Leave a comment

Your email address will not be published. Required fields are marked *