How to Fully Customize the MyListing Dashboard With Elementor

MyListing uses the WooCommerce Endpoints to help create what many have come to know as the ‘MyListing Dashboard’, which is where Listing Owners can go to see their Listings, Listing Stats, View Orders, and much more.

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 on MyListing websites, 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 MyListing 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 MyListing 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 you know how to create and design a Page template with Elementor.

Even if you do know all about Elementor template building, maybe you would like to save some time and use the MyListing Club Sandbox – Support Page template I built as part of doing this guide.

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, go ahead and follow the How To Install The MyLising Child Theme guide to get the child theme in place.
  2. Using a file manager plugin or an FTP application like FileZilla, browse to /wp-content/themes/my-listing-child/ 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, with of course the particulars of your own MyListing website.

Fully Custom MyListing Dashboard With Elementor

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

Design the Dashboard With Elementor

It’s now time to design our dashboard using Elementor and I’ll assume you know how to create and design a page with Elementor.

Even if you do know all about designing with Elementor, maybe you would like to save some time and use the MyListing Club Sandbox – Custom Dashboard template I built as part of doing this guide.

  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;
}
				
			

Hide the MyListing Default Headings

Since we’ve built a custom dashboard with our own WooCommerce navigation, we no longer need or want to show MyListing’s default endpoint headings.

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

				
					.mlduo-welcome-message h1 {
    display: none;
}
				
			

Video Tutorial

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • UiPress ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)