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,’ where Listing Owners can see their Listings, Listing Stats, View Orders, and much more.

Think of WooCommerce Endpoints as a menu system on the WooCommerce side of the house that calls up PHP files (i.e., code for WordPress). 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 appear as a menu item, but once you click on it, you’ll leave the dashboard.

This guide will teach you how to use Elementor to add fully customizable WooCommere Endpoints and a fully customizable dashboard.

Custom WooCommere Endpoints With Elementor

Let’s examine how to add a fully customizable Support page to your MyListing dashboard as an example.

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 the User Account drop-down menu.

Design the Endpoint With Elementor

With the ‘Support’ endpoint in place, it’s time to design a template using Elementor, and you can save time by using one of the Club’s Support Page templates.

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, 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, implement the MyListing Child Theme.
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; instead, use an FTP application such as FileZilla (Free) 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.
5. Copy the code snippet below and paste it into the my-account-support.php file. (Note: I purposely put a space after ‘[‘ and a space before the ‘]’ to avoid calling up the shortcode on this page. So, remove those spaces within your shortcode.).
6. Edit the template ID value (in this case, 1106) to match the value of your 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!

Fully Custom MyListing Dashboard With Elementor

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

Design the Dashboard With Elementor

It’s now time to design our dashboard using Elementor, and you can save time by using one of the Club’s Dashboard Page templates.

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, 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