When customers purchase products from your store, they expect to be able to manage orders and settings through an intuitive \u2018my account\u2019 page. Out-of-the-box, WooCommerce allows your customers to do just this. But what if you need to customize the my account page? We show you how.<\/p>\n
A typical WooCommerce my account page lists orders and personal information like billing or shipping address. Payment methods are also shown as an own page. Furthermore if you work with digital products your customers can see their available downloads.<\/p>\n
While basic, a standard my account page provides your customers with all the information they need to track and query purchases. However, creating a custom my account page for WooCommerce can add more features for the benefit of you and your customers.<\/p>\n
While the basic stuff is good for a start, at some day you want to create custom my account tabs & pages. Or you want to modify the dashboard text as it is kinda basic.<\/p>\n
Some example for custom my account pages:If you personalize the my account page your customers will feel much more trusted. They may like to login more often to use one of your custom services. This could lead into:<\/p>\n
There are two ways to create a custom my account page for WooCommerce. The first\u2014and often the preferred way for people with coding experience, is to customize pages manually by adding custom PHP code.<\/p>\n
Therefore you need to put some code into your functions.php file of your child theme. An Example is below, where we will add a custom Support page.<\/p>\n
First you need to register a new endpoint to use for My Account page. You need to save permalinks after added the code, otherwise you get a 404 error.<\/p>\n
add_action( 'init', 'add_support_endpoint' );\r\nfunction add_support_endpoint() {\r\n add_rewrite_endpoint( 'support', EP_ROOT | EP_PAGES );\r\n}\r\n<\/pre>\nCreate a new query var<\/h3>\n
You need to create a new query variable for the support page otherwise the content will not be loaded in 4.<\/p>\n
add_filter( 'query_vars', 'custom_support_query_vars', 0 );\r\nfunction custom_support_query_vars( $vars ) {\r\n $vars[] = 'support';\r\n return $vars;\r\n}\r\n \r\n<\/pre>\nAdd the My Account menu item<\/h3>\n
Insert the new endpoint into the My Account menu as an own item.<\/p>\n
add_filter( 'woocommerce_account_menu_items', 'custom_add_support_link_my_account' );\r\nfunction custom_add_support_link_my_account( $items ) {\r\n $items = 'Support';\r\n return $items;\r\n}\r\n<\/pre>\nLast add content<\/h3>\n
Add content to the new support page endpoint. The add_action must follow ‘woocommerce_account_{your-endpoint-slug}_endpoint’ format!<\/p>\n
add_action( 'woocommerce_account_support_endpoint', 'custom_support_content' );\r\nfunction custom_support_content() {\r\n\techo '<h2>Support Center<\/h2><p>Hey, if you need support contact us at su*****<\/span>@******<\/span>ch.io<\/span><\/p>';\r\n}\r\n<\/pre>\nNow we got a new support tab under the my account menu:You may now also need to reorder the items, create more tabs and at some point it will be too complicated. Also if coding is way beyond your skill level you should consider buying a plugin? This is a way easier way to customize the my account page.<\/p>\n
WooCommerce \u201cMy Account\u201d Customization Plugin<\/h2>\n