By default Woocommerce has a bunch of endpoints on my account page (dashboard, orders, account etc.) but it has no built-in feature that allows us to add custom endpoints to our site. Hence, in this post I will show you how to add custom endpoints in Woocommerce.
Video: How to add custom endpoints in Woocommerce?
If adding custom code to your site is somewhat complicated to you, then take a look at this video here below. In it I demonstrate how to create a custom endpoint in Woocommerce.
How to add custom endpoints in Woocommerce?
First, go to your site and add this code here below using Code Snippets plugin (or your child theme’s functions.php file) paste the code and activate it. If you’re a pro then take a look at the WpCodeBox plugin which is is a much better alternative to Code Snippets.
Now, some explanations for the code below:
- Take a look at the comments inside the code
- You need to change your endpoint slug and title accordingly (see lines 8, 18 and 46)
- Line 23 contains woocommerce_account_support_endpoint and you need to change it accordingly. That is, if your endpoint slug is your-courses then this line should look woocommerce_account_your-courses_endpoint
- After saving and activating your snippet you need to go to Settings > Permalinks and just push “Save Changes” button. Otherwise you end up with “Oops, that page cannot be found” error
// Add new tab to My Account menu
add_filter ( 'woocommerce_account_menu_items', 'wpsh_custom_endpoint', 40 );
function wpsh_custom_endpoint( $menu_links ){
$menu_links = array_slice( $menu_links, 0, 5, true )
// Add your own slug (support, for example) and tab title here below
+ array( 'support' => 'Support' )
+ array_slice( $menu_links, 5, NULL, true );
return $menu_links;
}
// Let’s register this new endpoint permalink
add_action( 'init', 'wpsh_new_endpoint' );
function wpsh_new_endpoint() {
add_rewrite_endpoint( 'support', EP_PAGES ); // Don’t forget to change the slug here
}
// Now let’s add some content inside your endpoint
add_action( 'woocommerce_account_support_endpoint', 'wpsh_endpoint_content' );
function wpsh_endpoint_content() {
// At the moment I will add Learndash profile with the shordcode
echo (
'<h3>Send us an email</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis tincidunt, nisi sociosqu lacinia auctor inceptos libero conubia accumsan</p>'
);
echo do_shortcode('');
}
// NB! In order to make it work you need to go to Settings > Permalinks and just push "Save Changes" button.
// If you need to change endpoint order then add your own order here
add_filter ( 'woocommerce_account_menu_items', 'wpsh_custom_endpoint_order' );
function wpsh_custom_endpoint_order() {
$myorder = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Your orders', 'woocommerce' ),
'edit-account' => __( 'Account details', 'woocommerce' ),
'edit-address' => __( 'Edit address', 'woocommerce' ),
'woo-wish-list' => __( 'Wishlist', 'woocommerce' ),
'support' => __( 'Support', 'woocommerce' ), // Don’t forget to change the slug and title here
'customer-logout' => __( 'Log out', 'woocommerce' ),
);
return $myorder;
}How to display Learndash’s profile page in Woocommerce my account tab?
If you would like to display Learndash’s profile page in Woocommerce my account tab, then use the same snippet here above and add [ld_profile] shortcode instead of a contact form.
Also, I have made a thorough tutorial on how to merge Learndash and Woocommerce account pages.
