Adding Affiliate WP Dashboard to WooCommerce My Account Page

I was recently working on integrating Affiliate WP into one of my friend’s sites. And after I set it up, I was a bit disappointed that the affiliate users would have a separate account page from the WooCommerce users.

For example, users that were checking order history, saved payment details, and more would go to /my-account. But, users that wanted to check their affiliate details would need to go to /affiliates.

The ideal situation seemed to be to add the affiliate page within the WooCommerce “My Account” page. So, I set about on a journey to make that happen.

Some discovery

It’s always nice to find out if others have solved the problem already. And I was in luck, as there were a few tutorials out there that discussed how to add menu items to the WooCommerce “My Account” page 😄 :

Tom writes great stuff, but this article I found of his is simply to add a menu item to the WooCommerce “My Account” page. It does not discuss how to add content to the tab. So, I worked mainly off of Rodolfo Melogli’s article which does cover how to add content to the tab.

What I ended up with

With just a few tweaks, I was able to integrate Affiliate WP in to the WooCommerce “My Account” page. I’ve included some high-level comments that explain what each section is for.

// Add the rewrite endpoint so that we don't 404 on the new My Account tab
function moh_add_aff_wp_endpoint() {
  add_rewrite_endpoint( 'aff', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'moh_add_aff_wp_endpoint' );

// Add the new affiliate area link to the "My Account" menu
// if Affiliate WP is enabled and the current user is an affiliate.
//
// Ensure that the logout link stays at the bottom of the menu ;)
function moh_add_aff_wp_link_my_account( $items ) {
  if ( function_exists( 'affwp_is_affiliate' ) && affwp_is_affiliate() ) {
    $logout = array_pop( $items );
    $items['aff'] = 'Affiliate Area';
    $items[] = $logout;
  }
  return $items;
}
add_filter( 'woocommerce_account_menu_items', 'moh_add_aff_wp_link_my_account' );

// Render the Affiliate WP Content within the new tab if Affiliate WP is enabled
function moh_aff_wp_content() {
  if ( ! class_exists( 'Affiliate_WP_Shortcodes' ) ) {
    return;
  }
  $shortcode = new Affiliate_WP_Shortcodes;
  echo $shortcode->affiliate_area();
}
add_action( 'woocommerce_account_aff_endpoint', 'moh_aff_wp_content' );

// Make sure that the Affiliate WP tabs properly work
function moh_filter_aff_tabs( $url, $page_id, $tab ) {
  return esc_url_raw( add_query_arg( 'tab', $tab ) );
}
add_filter( 'affwp_affiliate_area_page_url', 'moh_filter_aff_tabs', 10, 3 );

Final result

Here are a couple of screenshots demonstrating what this should look like when you’re done.

Closing thoughts

As you can see, just this little bit of code gives us a pretty good visual integration between Affiliate WP and WooCommerce. I found myself asking if Affiliate WP should do this within the plugin, but with how many integrations that they handle, I’m not sure if it would make sense for them.

In the future, and after more testing to make sure that nothing breaks if one of the plugins is not enabled, perhaps this could be factored in to a plugin. Until then, you should be able to get this working by copying the code in to a small plugin on your site or throwing it in the functions.php of your theme.

2 thoughts on “Adding Affiliate WP Dashboard to WooCommerce My Account Page

Leave a Reply