How To Create A Clean Menu Structure For Your WooCommerce Affiliate Program (SliceWP)
Take a gander at the below to see what I mean:
Are You Sitting Comfortably? Then I’ll Begin
Creating A Custom Menu For Affiliates
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.
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
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
I’ve added two equal-size columns, 50 / 50 in Gutenberg. Using the shortcodes, that the SliceWP plugin offers which are:
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
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:
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
Creating A Menu Item For The SliceWP Affiliate User Role
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.
- 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:
- 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.
Wrapping It Up
Subscribe To My Newsletter