The WooCommerce plugin has the shortcode [woocommerce_my_account] available which one can embed in any page to display to the logged in customers all the information related to their past orders, addresses, payment details and more, based on the plugins that you may have installed in the site. The shortcode outputs the data organized by tabs and unique content in each, as you can see in the following image:
How can we remove, alter or add new tabs?
Yes, one option is to use an existing plugin, and the other option is to write a few lines of PHP. I will provide a few PHP snippets below so you can add them to your functions.php file and make any needed customizations. We are using the following WordPress filter hooks woocommerce_account_menu_items and woocommerce_get_endpoint_url
Remove tabs
/**
* Remove the pre orders link from the My Account page.
* @param $menu_links
* @return array|string[]
*/
function my_site_remove_my_account_links( $menu_links ) {
// Remove the pre-orders tab from the my account page.
// This tab is created by the plugin https://woocommerce.com/products/woocommerce-pre-orders/
unset( $menu_links['pre-orders'] );
// You can find below the default tabs.
//unset( $menu_links['dashboard'] ); // Remove Dashboard tab.
//unset( $menu_links['orders'] ); // Remove Orders tab.
//unset( $menu_links['edit-address'] ); // Addresses tab.
//unset( $menu_links['payment-methods'] ); // Remove Payment Methods tab.
//unset( $menu_links['edit-account'] ); // Remove Account details tab.
//unset( $menu_links['customer-logout'] ); // Remove Logout link tab.
return $menu_links;
}
add_filter ( 'woocommerce_account_menu_items', 'my_site_remove_my_account_links' );
Update the tabs' titles
/**
* Update the title of the tabs in the My Account page.
* @param $menu_links
* @return array|string[]
*/
function my_site_update_my_account_links( $menu_links ) {
// Update the text for the orders tab.
$menu_links['orders'] = __('My Past Orders');
// You can find below the default tabs.
// $menu_links['dashboard'] = __('Your Custom Dashboard Text'); // Update the Dashboard tab title.
// $menu_links['edit-address'] = __('Your Custom Addresses Text'); // Update the Addresses tab title.
// $menu_links['payment-methods'] =__('Your Custom Payment Methods Text'); // Update the Addresses tab title.
// $menu_links['edit-account'] = __('Your Custom Account Text'); // Update the Addresses tab title.
// $menu_links['customer-logout'] = __('Your Custom Logout Text'); // Update the logout tab title.
return $menu_links;
}
add_filter ( 'woocommerce_account_menu_items', 'my_site_update_my_account_links' );
Add a custom tab, which links to a internal/external URL
/**
* Add a new custom link to the My Account page.
* @param $menu_links
* @return array|string[]
*/
function my_site_add_my_account_links( $menu_links ) {
// Uncomment these lines if you want to display the new tab only to certain role.
// Get the current user.
// $user = wp_get_current_user();
// if ( !in_array( 'MY_ROLE', (array) $user->roles ) ) {
// return $menu_links;
// }
// customendpoint will be hooked from the woocommerce_get_endpoint_url filter.
$new = [ 'customendpoint' => __('My new tab') ];
return array_slice( $menu_links, 0, 1, true )
+ $new
+ array_slice( $menu_links, 1, NULL, true );
}
add_filter ( 'woocommerce_account_menu_items', 'my_site_add_my_account_links' );
/**
* Set the URL for the endpoint customendpoint created in woocommerce_account_menu_items
* @param $url
* @param $endpoint
* @param $value
* @param $permalink
* @return mixed|string
*/
function my_site_custom_endpoint( $url, $endpoint, $value, $permalink ) {
if ( $endpoint === 'customendpoint' ) {
$url = '/internal-url/';
// You can have an external URL too.
// $url = 'https://davidloor.com';
}
return $url;
}
add_filter( 'woocommerce_get_endpoint_url', 'my_site_custom_endpoint', 10, 4 );
For a full explanation about the WooCommerce My Account page, you can visit:
https://woocommerce.com/document/the-my-account-page/
Top comments (0)