How to add the affiliate account page to the WooCommerce customer account

If you’ve been using SliceWP for a while now to power your affiliate program, you already know that you can set up a few pages dedicated specifically for affiliates.

These pages are the affiliate login, affiliate registration and affiliate account page. The goal of these is to create a distinct area for affiliates inside of your WordPress website.

But, what if you want to have a more compact flow for your affiliates? What if you don’t want a separate account page for affiliates, but rather have this functionality integrated into your WooCommerce customer account page?

These are questions that a few of our customers raised. And with this article my goal is to provide the answers.

Integrating the affiliate account into the WooCommerce customer account

Currently, the customers that are also affiliates for your shop have two separate account pages:

1. The “My account” page, powered by WooCommerce, where they can view their order history, billing details and so on.
2. The “Affiliate account” page, powered by SliceWP, where they can view their referred visits and commissions.

For site owners that want a clear distinction between the shop area and the affiliate area, the above situation is ideal.

However, in certain cases, it is not. For example, if you automatically turn all your customers into affiliates, it’s much more intuitive for these users to have access to all of their information in a single place.

The solution? Create a separate affiliate area in WooCommerce’s “My account” page and move the entire affiliate account in it.

The final result will look something like this:

As you can notice in the screenshot, there’s a new Affiliate area item in the WooCommerce customer account menu. If you click it, the entire affiliate account, powered by SliceWP, will be accessible.

The remaining question now is:

How do you enable the affiliate area in WooCommerce?

The answer, either by 1) installing a small add-on, or 2) by copying and pasting a short piece of code.

Option 1: With an add-on

This add-on is, in essence, just a small WordPress plugin, similar to any of the plugins you already have installed. Here’s how you can set it up:

1. Download the add-on by clicking this link.
2. Navigate to your WordPress admin dashboard > Plugins > Add New > Upload Plugin.
3. Select the .zip file you just downloaded and click the Install Now button.
4. Once the plugin is installed, activate it.
5. Lastly, and most importantly, navigate to your WordPress admin area > Settings > Permalinks and resave your permalink structure, without changing any values.

The add-on doesn’t have any settings, so there’s nothing else you need to do. If you now navigate to the customer account page, while logged in with an affiliate user, you should see the Affiliate area item in the menu.

Option 2: With custom code

If you have a custom PHP file that you use for custom code or prefer to add any custom code to your theme’s functions.php file, the code below will do the same thing the above add-on does.

Important note: please make sure to add only one of these two options to your website. Adding both the add-on and the custom code will result in critical errors.

/**
 * Register a new enpoint for the affiliate area
 *
 * Note: Resave Permalinks or it will lead to a 404 error
 *
 */
function slicewp_custom_add_endpoint_affiliate_area() {

    add_rewrite_endpoint( 'affiliate-area', EP_ROOT | EP_PAGES );

}
add_action( 'init', 'slicewp_custom_add_endpoint_affiliate_area' );

/**
 * Add 'affiliate-area' to the query vars
 *
 */
function slicewp_custom_query_vars_affiliate_area( $vars ) {

    $vars[] = 'affiliate-area';

    return $vars;

}
add_filter( 'query_vars', 'slicewp_custom_query_vars_affiliate_area', 0 );

/**
 * Add the new endpoint to the WooCommerce account menu items list, just before "Logout"
 *
 */
function slicewp_custom_add_link_my_account_affiliate_area( $items ) {

    if( ! function_exists( 'slicewp_is_user_affiliate' ) || ! slicewp_is_user_affiliate() )
	return $items;

    $items = array_merge( 
    	array_slice( $items, 0, count( $items ) - 1 ),
    	array( 'affiliate-area' => 'Affiliate area' ),
    	array_slice( $items, count( $items ) - 1 )
    );
    
    return $items;

}
add_filter( 'woocommerce_account_menu_items', 'slicewp_custom_add_link_my_account_affiliate_area' );

/**
 * Add the affiliate account as content for the new endpoint
 *
 */
function slicewp_custom_woocommerce_account_endpoint_content_affiliate_area() {
	
    echo do_shortcode( '[slicewp_affiliate_account]' );

}
add_action( 'woocommerce_account_affiliate-area_endpoint', 'slicewp_custom_woocommerce_account_endpoint_content_affiliate_area' );

Closing thoughts

If you’re wondering why this functionality is not a part of SliceWP’s core, it’s due to a couple of reasons:

1. It was requested only a few times (by the way, if you wish to request certain features or you have ideas on how we can improve the plugin, contact us here).
2. It’s related strictly to WooCommerce.

Considering SliceWP integrates with multiple eCommerce plugins, having just this one extra option in the settings page, that’s available to only a single integration, would feel out of place.

However, once there are more features tied to individual integrations, we will be looking at ways to integrate them seamlessly in the core plugin.

Until then, I hope the above add-on or custom code helps you integrate the affiliate area into WooCommerce’s my account page.

If you’re having any errors or issues with the above two solutions, please contact us here and let us know what’s happening.