Website Building » WooCommerce » How Do I Add a Custom Page to My WooCommerce Account Area?

How Do I Add a Custom Page to My WooCommerce Account Area?

Last updated on January 13, 2023 @ 2:51 pm

Creating a custom page in the WooCommerce account area can be a great way to provide additional information or functionality to your customers. In this post, we’ll walk through the steps for adding a custom page to the WooCommerce account area, including some sample code to get you started.

1. Create a new PHP file in your theme or plugin directory, and name it something like “my-custom-page.php”.

2. Add the following code to the top of your new PHP file, which will create a new endpoint for your custom page:

add_action( 'init', 'my_custom_endpoint' );
function my_custom_endpoint() {
add_rewrite_endpoint( 'my-custom-page', EP_ROOT | EP_PAGES ); }

3. Next, we’ll need to add a template for our custom page. To do this, add the following code to your functions.php file, or to the same plugin or theme that contains your my-custom-page.php file:

add_action( 'woocommerce_account_my-custom-page_endpoint', 'my_custom_page_content' );
function my_custom_page_content() {
include( get_stylesheet_directory() . '/my-custom-page.php' ); }

4. Finally, you’ll need to add a link to your custom page in the WooCommerce account area. You can do this by adding the following code to your theme’s functions.php file or to the same plugin or theme that contains the above code:

add_filter( 'woocommerce_account_menu_items', 'my_custom_menu_link' );
function my_custom_menu_link( $menu_links ) {
$menu_links = array_slice( $menu_links, 0, -2, true )
+ array( 'my-custom-page' => 'My Custom Page' )
+ array_slice( $menu_links, -2, null, true );
return $menu_links; }

5. That’s it! You should now have a fully functional custom page in the WooCommerce account area. You can add any content or functionality you like to the my-custom-page.php file, and it will be displayed to users when they visit the “My Custom Page” link in the account area.

Note: Remember to flush the permalinks after adding the new endpoint by going to Settings > Permalinks and click on Save Changes button.

Please keep in mind that this is just an example and you can customize this according to your requirement.

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.