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.

2 replies
  1. Paal Joachim
    Paal Joachim says:

    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.

    Reply

Trackbacks & Pingbacks

  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. […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.