How To Create A Clean Menu Structure For Your WooCommerce Affiliate Program (SliceWP)

So as part of the in-depth review/guide, I did for SliceWP, which incidentally is very good, I did notice that the links to the account page, login, and register could be confusing to some.

Take a gander at the below to see what I mean:

To keep the affiliate program guide from reading like war and peace (although it probably still does!), I thought I’d share with you how to clean up the menu items and make it more attractive, here instead of adding it to the original guide.

Brainwave Time

The idea for this came about when I reread a review/tutorial on how to make a custom menu for logged in/out users for WooCommerce. 

This method required the use of the Nav Menus Plugin, which again I have reviewed and recommend.

Thinking about it logically, I want to make things easier for store owners/affiliate program owners, creating menus that make sense to customers and affiliates. So that’s pretty much what you’re going to get.

I know that SliceWP creates a new user role called “Affiliate” upon installation, which is useful, as the Nav Menu Roles plugin does just that, show menus based on a specific user role, or hide them.

Are You Sitting Comfortably? Then I’ll Begin

So if you’ve read my guide on how to set up an affiliate program for WooCommerce, you’ll know you need SliceWP for this and one other plugin Nav Menu Roles.

I’ll also assume you’ve read the tutorial for the Nav Menu roles plugin so that I can skip the installation process.

Creating A Custom Menu For Affiliates

Head on over to Appearance > Menus and give your menu a name then click on Create Menu. See below for what I mean:

Make sure to give your menu a name; trust me, it will make things easier for you, especially if you have lots of menus or places where menus occur.

I’ve called mine Main Navigation (yes I’m boring), you can call yours whatever you like! See below to see the contents of it:

Pretty standard stuff, right? I need it to do more, though. Actually, this is what I want to do:

• I want to show the Affiliates Menu item to everyone in the header. To entice them into becoming an affiliate.
• I don’t want to show the Affiliates Menu item to WooCommerce customers who have logged in as customers, but I’d like to show it as a submenu item.
• If they become affiliates and have registered as an affiliate. I want to show a My Account Menu for the store, and an Affiliate Submenu for them to check their account.
• I also want to highlight some useful links for Affiliate members in the submenu.
• Lastly, I want an easy way for everyone to log out.

Don’t want much, do I? With me so far? Like I said it sounds/looks complicated, it isn’t. I’ll show you how to do it, don’t worry.

Let’s Start With Making A Quick Change In WooCommerce

The first thing I’ve done in WooCommerce is to allow customers to create an account from the My Account page.

This tidies things up and means I can have a menu item called Login/Register. Head over to WooCommerce in your admin sidebar, Settings then Accounts & Privacy:

That’s all you need to do at this stage. See below for an example of the My Account Page with both options available:

You’ll understand why I’ve done this later on; for now, just go with it.

Second Stage, Clearing Up Affiliate Pages For SliceWP

You’ll know from my guide on SliceWP, you can create Affiliate pages during the setup wizard, or not, whatever the case may be. See below image with link as they are currently:

How do you clear this up? To do this, we need to make some changes to the affiliate registration page.

I’m using Gutenberg (not that I have anything against Elementor or other page builders); if you are using Elementor / Beaver Builder, you probably know how to add a row and two columns!

I’ve added two equal-size columns, 50 / 50 in Gutenberg. Using the shortcodes, that the SliceWP plugin offers which are:

[slicewp_affiliate_registration]

and

[slicewp_affiliate_login]

I’ve added two Shortcode blocks in each respective column. See below for what this looks like in the block editor (Gutenberg):

You’ll notice that I have put a title above each shortcode block, mainly to help people identify which is which, see the page output below:

By adding registration/login to one page, it cleans things up. I can get rid of one of the URLs and just point them to this page.

Setting Visibility Of Menu Items By User Role

I’ve made numerous changes to my new Main Navigation menu. Nav Menu Roles allows you to set the visibility of a menu item based on a user role. See below for a screenshot:

You’ll note the menu item is entitled Login/Register, the actual URL this points to is the My Account page in WooCommerce.

Allowing users to register on the My Account page (as per my recommendation earlier) negates the need to have an overly complicated menu. So in effect, one menu item to access their account or register.

I’ve set the visibility to Logged Out Users, so anyone not already logged in will see this menu item. If they are logged in, they won’t.

Following the same method, I’ve renamed the Affiliate Registration page SliceWP creates (if you’ve used the setup wizard) to Become An Affiliate, I’ve also set the visibility to show to Logged Out Users. See below:

Anyone logged in as either an affiliate or a customer will not see either of these menu items. What does this menu look like so far? Bearing in mind, I’m currently logged out:

I’m sure we can all agree it looks a heck of a lot cleaner, more accessible for customers to log in/register, and those looking to become affiliates!

Creating A Menu Item For The WooCommerce Customer User Role

Ideally, I want to keep this as simple as possible—just one menu item with a submenu. Thanks to the magic of WooCommerce, once a user is logged into their account, the page content shows the customer dashboard as below:

Now the trick here is to show a menu item displaying My Account, and we need our customers and affiliates to be able to access it. Easy enough to do. See below:

I’ve set this menu item to display for Logged In Users, who match Customer and Affiliate’s user roles.

I’ve also added, “Become An Affiliate” as a submenu item, this time around I’ve set it to display only to the Customer user role:

Why? Well, I’d like my customers to signup to become an affiliate in the future. Having it as a submenu is a constant reminder for them to sign up.

By only showing this to the Customer user role, Affiliates will not see this menu item. The last submenu item I’ve added is to Logout, using a WooCommerce endpoint see below for the settings:

I’ve set the visibility for the Logout link, to Logged In Users, with both the Customer and Affiliate user roles.

What does the menu look like to WooCommerce customers or our store customers once they are logged in? See below:

Notice that the Login/Register and Become An Affiliate menu items are replaced with the My Account one and the subsequent submenu. This lends itself to a much cleaner user experience.

Creating A Menu Item For The SliceWP Affiliate User Role

So, the Customer user role is dealt with. Up next, we need to create a menu item for the Affiliate user role that SliceWP offers.

Following the same logic, we don’t want an overly complicated menu structure. See below for how I tackled this:

Only making these visible to those with an Affiliate user role means those with a Customer user role will not be able to see them. So if a customer does not want to become an affiliate, they’ll never see these. 

Affiliates can see these, so it makes sense to elaborate on them. You’ll notice the additional submenu items as below:

Why have I added these menu items? Well, I think affiliates like to get to the point of how much they’ve made!

The first menu item “View Affiliate Offers” is a call to action, this sends them to the Creatives tab in their affiliate dashboard that SliceWP generates:

All I’ve done here for each menu item is insert a custom link menu item to the Affiliate dashboard in SliceWP, so for example:

• Link text: View Latest Affiliate Offers – link is: http://yoursite.com/affiliate-account/?affiliate-account-tab=affiliate_links#
• Link text: View Commissions – link is: http://yoursite.com/affiliate-account/?affiliate-account-tab=affiliate_links#
• Link text: View Visits – link is: http://yoursite.com/affiliate-account/?affiliate-account-tab=visits#
• Link text: View Payments – link is: http://yoursite.com/affiliate-account/?affiliate-account-tab=payments

What Does It Look Like To Affiliates?

All this is for nothing unless it makes the affiliate’s lives easier. So with that in mind, take a look at the below:

There that’s much better, all the links our affiliate needs! Plus, a handy logout link.

• The top-level My Account menu item will take the affiliate to the customer dashboard. 
• The submenu links will take them to their affiliate dashboard. The Logout link will take them to the customer dashboard WooCommerce offers, for them to confirm Logging Out. 

Following the same way of doing things, you could add navigation to your sidebar or footer, then show or hide depending on the user role.

Wrapping It Up

Is it perfect? No, is it more accessible for affiliates/customers to navigate using this method? Yes, above all else, making it easier, means more sales, and more affiliates, which again leads to more sales. Don’t forget to look at the SliceWP hub for more information and guides on this affiliate program plugin.