How to Customize My Account Page for WooCommerce 

Would you like to make changes to your store’s My Account section? We’ll teach you how to customize My Account for WooCommerce so that you can better serve your customers.

In order for an e-commerce website to work well, the “My Account” page must be effectively designed so that customers can fully utilize account management. It can also be customized to convert more sales and/or entice return customers. WooCommerce custom account page contains crucial details for customers, including their orders, addresses, payment methods, and account information. Because it’s such an important hub, store owners might want to proceed with the WooCommerce customize My Account page plugin by adding new custom endpoints to display additional information and enhance its appearance.

The WooCommerce My Account customization can be done in various ways, including the layout, content, and design. This can be achieved with two methods: with plugin and programmatically. 

Edit WooCommerce My Account Page – Methods

There are two main methods to Edit WooCommerce My Account Page.

1. WooCommerce My Account Page Editor by KoalaApps
2. Edit WooCommerce My Account Page Programmatically

Method #1: WooCommerce My Account Page Editor by KoalaApps

WooCommerce My Account Page Editor plugin provides you the option to customize WooCommerce account dashboard to include essential information and keep the page more informative. You can organize endpoints by either removing the default endpoints or creating new custom endpoints to conserve space and focus on the most important information. 

Installation

1. To install this plugin, search the .zip file from your WooCommerce account and begin downloading.
2. Go to the WordPress Admin Panel. Select Plugins and choose Add New and then choose the file to Upload Plugin.
3. Select Install Now and then click Activate.

Setup and Configuration

After activating the WooCommerce My Account Page Editor plugin, “My Account Page Editor” will appear in the WordPress Admin Panel. Hover over it to view the detailed settings.

Create a New Endpoint

On the My Account Page, you can view a list of all custom endpoints that are created using this plugin. 

To add a new menu item or tab to your My Account page, click on the Add New Endpoint button. When adding a new endpoint, you can set the following options:

• Endpoint title and slug
• Select from the available icon
• Restrict by user roles 
• Choose endpoint type
• Add custom content using the editor

Enable Grouped Endpoint

When you choose the grouped endpoint with this plugin, two additional fields will appear. Here, you can:

• Choose the custom endpoints to show as dependable
• Choose the default endpoints to show as dependable

All of the dependable endpoints will be presented under this group endpoint heading in the My Account menu.

Customize Text, Background, and Other Options

WooCommerce My Account Page Editor offers various customization options. These include:

• Endpoint display type:
  • Theme Style (Inherits default theme style. Group endpoints are not compatible)
  • Left Sidebar (Replaces menu with plugin custom style)
  • Right Sidebar (Replaces menu with plugin custom style)
  • Tabs (Replaces menu with plugin custom style)
• Add text, background, and hover color
• Hide default endpoints

Reorder Endpoints 

The endpoints on the My Account page can be sorted using a drag-and-drop feature. You can adjust the order of both new and default endpoints to suit your preferences. For example, you can arrange them to highlight key endpoints by placing them at the top.

Adjust Dashboard Visuals and Design

To make a custom WooCommerce dashboard, you can start with the general settings. Begin by setting the page title and enabling the dashboard with a simple checkbox. You can choose which tables or panels to display, such as:

• Total Orders
• Pending Orders
• Total Refunds
• Total Wishlists
• Total Downloads
• Total Reward Points
• Total Transactions
• Enable Custom Avatar
• Latest Order
• Enable Pie Chart

Next, select a template that best suits your needs. For design customization, you can add custom CSS and adjust the following:

• Theme Background Color:
• Theme Color:
• Background Hover Color:

Method #2: Edit WooCommerce My Account Page Programmatically

If you are interested to edit WooCommerce Account Page with the help of a program, here is the program-based implementation to help you achieve the desired results.

Copy and post the following code in functions.php file of your active or child theme to create new custom endpoints for your custom my account page.

Code:

public function kamy_acc_add_endpoints_and_content() {

if ( ! empty( get_option( ‘kamy_acc_set_ep_as_fld’ ) ) && ‘theme’ !== get_option( ‘kamy_acc_set_ep_as_fld’ ) ) {
remove_action( ‘woocommerce_account_navigation’, ‘woocommerce_account_navigation’, 10 );
add_action( ‘woocommerce_account_navigation’, array( $this, ‘kamc_account_navigation’ ), 10 );
}

$kamy_acc_endpoints = $this->kamy_acc_get_endpoints();

if ( is_array( $kamy_acc_endpoints ) ) {

foreach ( $kamy_acc_endpoints as $kamy_endpoint ) {

$ep_id = $kamy_endpoint->ID;

$kamy_slug = get_post_meta( intval( $ep_id ), ‘kamy_acc_slug_fld’, true );

add_rewrite_endpoint( $kamy_slug, EP_ROOT | EP_PAGES, $kamy_slug );

add_action(
‘woocommerce_account_’ . $kamy_slug . ‘_endpoint’,
function() use ( $ep_id ) {
$this->kamy_acc_get_custom_endpoint_content( $ep_id );
}
);
}flush_rewrite_rules();
}
}
add_action( ‘init’, array( $this, ‘kamy_acc_add_endpoints_and_content’ ) );

Finishing Up

Improve customer experience and engagement with your store by customizing your WooCommerce My Account page. Adding all the necessary product details, guides, and FAQs on a single page reduces the chances of customer dissatisfaction and frustration. As a result, product queries and returns decrease and loyalty increases.