Adding a Logout link in the main menu

I’ve found many support requests, both on WordPress.org support forum and the WooThemes Help Desk, about how to add a customer logout link in the main menu.

Some themes include their own methods to do so, there are also many custom snippets to add in your functions.php file to add the Logout link manually.

Did you know that WooCommerce has a feature to allow you to easily add the link to the menu? Furthermore, it will be automatically hidden to customers who are not logged in!

WooCommerce Endpoints

To add a Logout link to your menu, first you need to define the Logout endpoint in WooCommerce > Settings > Accounts. The default value is customer-logout, and I suggest you to use that one, or at most change it to logout only.

Adding The Logout Link to The Menu

Once you defined your logout endpoint, go to Appearance > Menus. Click on Screen Options at the top right corner of the page and select the option WooCommerce Endpoints:

WooCommerce Endpoints menu box

You should now see the box WooCommerce Endpoints in the list on the left of this page:

WooCommerce Endpoints Box

As you can see, it includes some WooCommerce endpoints, including the customer-logout endpoint. Add it to your menu, and change the Navigation Label to something else, customer-logout does not look really good for the end-user!

customer-logout-menu-item

The link will now appear in the menu only for logged-in customers. Yes, only to logged-in customers. WooCommerce has a built-in feature that searches for that link in each menu, and removes it if the customers visiting the website is not logged in.

Known issue: As of May 2016 there’s a known issue with this feature and a patch ready to be merged. Make sure that your customer-logout endpoint is not the same of your website domain, otherwise customers not logged-in will not see the menu you chose to use, but they will see a default menu defined by WordPress, or another one defined by your theme. So, for example, if you website domain is http://myawesomestore.com and your logout endpoint is awesome, the complete logout URL will be http://myawesomestore.com/awesome and this bug will be triggered.

 

Contribute to Improving This Blog

Did you enjoy this article? Was it helpful? Contribute to help me writing more articles! The funds collected from this blog are reinvested directly into improving my skills or the blog so that I can provide more and better content!

One-Time
Monthly
Yearly

Make a one-time donation

Make a monthly donation

Make a yearly donation

Choose an amount

¤5.00
¤15.00
¤100.00
¤5.00
¤15.00
¤100.00
¤5.00
¤15.00
¤100.00

Or enter a custom amount


Your contribution is appreciated.

Your contribution is appreciated.

Your contribution is appreciated.

DonateDonate monthlyDonate yearly

Do you prefer using cryptocurrency? I’ve got you covered! You can donate at the following wallets:

  • BTC: bc1q87nxpdpqw323ccmerrzyeffs72wnxpw93x7pzk / 17Gtc5e8yoh2LZzokoyK8P5DWbToBwztok
  • ETH: 0xA5C89Be1df2896C3942DBEf751cCeacC7929388b


More Posts That You Might Like…


2 responses to “Adding a Logout link in the main menu”

  1. […] Add a customer logout link to your main menu with this tutorial from Nicola Mustone — it will even be hidden for logged-out users. […]

  2. Hey Nicola

    It would be great to have a step two or option two to this tutorial…
    As option two could be to hover over the logout link in the menu and see a submenu with a confirm to logout button in it. One then just clicks the button and is logged out without having another page open to then log out.

Leave a Reply

Categories

Newsletter

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Blog at WordPress.com.

%d bloggers like this: