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 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 WooCommerce 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.
Note: We highly recommend using the WooCommerce Account Endpoints Manager feature in MyListing Pro instead of performing the manual steps in this section of the guide. It not only saves you time and helps you avoid potential headaches, but it also provides additional features to level up your MyListing dashboard menu.
Create the Endpoint
- Add the code snippet below to your website.
In this snippet example, we are adding a custom WooCommerce endpoint named Support. If you don’t want to name your page “Support,” anywhere you see the word “Support” in the code snippet, change it to the name of your page.
// WOO NAVIGATION
function wpb_woo_my_account_order() {
$myorder = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'edit-account' => __( 'Edit Account', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' ),
'downloads' => __( 'Downloads', 'woocommerce' ),
'edit-address' => __( 'Addresses', 'woocommerce' ),
'payment-methods' => __( 'Payment Methods', 'woocommerce' ),
'support' => __( 'Support', 'woocommerce' ),
'customer-logout' => __( 'Logout', 'woocommerce' ),
);
return $myorder;
}
add_filter ( 'woocommerce_account_menu_items', 'wpb_woo_my_account_order' );
// WOO REGISTER ENDPOINT
add_action( 'init', 'my_account_new_endpoints' );
function my_account_new_endpoints() {
add_rewrite_endpoint( 'support', EP_ROOT | EP_PAGES );
}
// WOO ENDPOINT LINK
add_action( 'woocommerce_account_support_endpoint',
'support_endpoint_content' );
function support_endpoint_content() {
get_template_part('my-account-support');
}- WordPress Dashboard > Appearance > Menus > Expand WooCommerce Endpoints.
- Select the Support endpoint and click Add to Menu.
- Save changes.
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.
- If you haven’t already, implement the MyListing Child Theme.
- 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.).
- While in the child theme directory, create a file named my-account-support.php.
- Edit the file with a text editor of your choice.
- 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.).
- 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.
- WordPress Dashboard > Pages > Edit the ‘My Account’ page with Elementor.
- Remove every element on the page, as we’ll be designing from scratch.
- Design the page as desired.
- 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.).
- Copy the shortcode below and paste it into the shortcode widget.
- Remove the spaces from the shortcode.
- 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. 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
