How to Fully Customize the WordPress Dashboard With Elementor

Think of WooCommerce Endpoints as basically a menu system on the WooCommerce side of the house, that calls up PHP files (i.e. code for WordPress).

In order to manipulate this menu, you need to create a custom menu in WordPress and then tick the ‘WooCommerce Menu’ box to activate it.

You can then add links to any post, page, etc., but unless the content you link to is part of the WooCommerce content system (i.e. /my-account/endpoint-name/, that content will not act like it’s part of the actual dashboard.

For example, if you create a page named ‘Support’ and add it to your custom WooCommerce menu, it will show up as a menu item but once you click on it you’re actually leaving the dashboard at that point.

This guide will teach you how to use Elementor to add fully-customizable WooCommere Endpoints, as well as a fully-customizable dashboard.

Custom WooCommere Endpoints With Elementor

In this section, I’m going to show you how to add a fully-customizable Support page to your My Account dashboard.

Add the Endpoint

  1. Place the Add a Custom WooCommere Endpoint code snippet on your website.
  2. WordPress Dashboard > Appearance > Menus > Expand WooCommerce Endpoints.
  3. Select the ‘Support’ endpoint and click the ‘Add to Menu’ button.
  4. Save your menu.

At this point, you will have a ‘Support’ endpoint within your My Account dashboard and within the User Account drop-down menu.

Design the Endpoint With Elementor

With the ‘Support’ endpoint in place, it’s now time to design a template using Elementor and I’ll assume that you either know how to create a Page template with Elementor and/or import a pre-made template into your website.

Elementor Template Shortcode

Whatever you decide to do for your template, once you have one in place, Elementor will give you a shortcode for that template.

The shortcode for any template can be found by clicking on the ‘Templates’ menu item within your WordPress Dashboard, locating your template, and then looking at the ‘Shortcode’ column.

Let’s continue on and we’ll refer back to this section shortly.

Call the Elementor Template

The final piece is to give WooCoomerce a file (.php) for our template to hook into.

  1. If you haven’t already, make sure you have installed a Child Theme for your website.
  2. Using a file manager plugin or an FTP application like FileZilla, browse to /wp-content/themes/your-child-theme/ within your WordPress install. (Note: I highly recommend you not use a file manager plugin and instead use an FTP application, so that you’re never locked out of your website should something go wrong.).
  3. While in the child theme directory, create a file named ‘my-account-support.php‘.
  4. Edit the file with a text editor of your choice. (Note: I love to use Visual Studio Code which is free and extremely powerful.).
  5. Copy the code snippet below and paste it into the my-account-support.php file.
  6. Edit the template id value (in this case it’s 1106) to match the value of your own shortcode, which we outlined in the previous section.
				
					<?php echo do_shortcode("[elementor-template id='1106']"); ?>
				
			

Okay, that should be all there is to it! You should now have something similar to what’s shown below.

mylisting club guide fully customized woocommerce dashboard support page

Fully Custom My Account Dashboard With Elementor

In this section, I’m going to show you how to fully customize the entire My Account dashboard landing page (i.e. My Account page).

Design the Dashboard With Elementor

  1. WordPress Dashboard > Pages > Edit the ‘My Account’ page with Elementor.
  2. Remove every element on the page, as we’ll be designing from scratch.
  3. Design the page as desired.
  4. Add an Elementor shortcode widget to the bottom of your page. (Note: I purposely put a space after ‘[‘ and a space before the ‘]’, to avoid calling up the My Account elements on this page. So, just be sure to remove those spaces within your shortcode.).
  5. Copy the shortcode below and paste it into the shortcode widget.
  6. Remove the spaces from the shortcode.
  7. Save changes.
				
					[ woocommerce_my_account ]
				
			

Hide the Default WooCommerce Menu

Since we’ve built a custom dashboard with our own WooCommerce navigation, we no longer need or want to show the default WooCommerce menu system.

Copy the CSS below and add it to your website using your preferred method.

				
					.woocommerce-MyAccount-navigation {
     display:none;
}
				
			

Video Tutorial