WooCommerce MyAccount custom endpoint

I was trying to add a tab in WooCommerce my account page to show enrolled courses directly there from the Learning Management System. I’ve referred this WooCommerce guide. Following is the code I’ve used, I’ve commented in the code block, so each function is self explanatory. The LMS plugin I’ve used here is LearnDash LMS. What we basically trying to do here is adding¬† a WooCommerce MyAccount custom endpoint.

// ------------------
// 1. Register new endpoint to use for My Account page
// Note: Resave Permalinks or it will give 404 error
function add_enrolled_courses_endpoint() {
    add_rewrite_endpoint( 'enrolled-courses', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'add_enrolled_courses_endpoint' );


/**
 * 2.a. Custom help to add new items into an array after a selected item.
 *
 * @param array $items
 * @param array $new_items
 * @param string $after
 * @return array
 */
function my_courses_insert_after_helper( $items, $new_items, $after ) {
  // Search for the item position and +1 since is after the selected item key.
  $position = array_search( $after, array_keys( $items ) ) + 1;

  // Insert the new item.
  $array = array_slice( $items, 0, $position, true );
  $array += $new_items;
  $array += array_slice( $items, $position, count( $items ) - $position, true );

    return $array;
}


/**
 * 2.b. Insert the new endpoint into the My Account menu.
 *
 * @param array $items
 * @return array
 */
function my_courses_my_account_menu_items( $items ) {
  $new_items = array();
  $new_items['enrolled-courses'] = __( 'Enrolled courses', 'woocommerce' );

  // Add the new item after `orders`.
  return my_courses_insert_after_helper( $items, $new_items, 'orders' );
}
add_filter( 'woocommerce_account_menu_items', 'my_courses_my_account_menu_items' );

/**
 * 3. Insert Endpoint content.
 */
function enrolled_courses_content() {
  echo do_shortcode('[ld_profile orderby="date" order="ASC"]');
}
add_action( 'woocommerce_account_enrolled-courses_endpoint', 'enrolled_courses_content' );

 

Steps adding WooCommerce MyAccount custom endpoint

Please note following things while doing your custom endpoint. There are three steps.

  1. Create an endpoint and register it (use¬†add_rewrite_endpoint for this). I’ve re-saved permalink settings for getting it activated.
  2. Add new item to the menu (here I’ve used another function to insert the item after finding one, that is ‘a’. ‘b’ function inserts the end point.)
  3. Finally insert the content for that endpoint. (woocommerce_account_{endpoint}_endpoint is the hook to catch the bugger!!. In the above example, woocommerce_account_enrolled-courses_endpoint is the one.)

Third part can be skipped and use a page/post published already. But don’t forget set that page’s parent as “My Account”, otherwise there will be a 404. For example, set example.com/my-account/custom-end-point/

This is how it looked after adding the end point.

WooCommerce MyAccount custom endpoint

As the content, I’ve used the LearnDash’s shortcode for listing profile and courses. Don’t forget to use do_shortcode if you are adding shortcodes in PHP.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.