Woocommerce

WooCommerce is the most popular ecommerce plugin in the WordPress ecosystem. However, it has a bit of a nagging usability issue. By default, WooCommerce doesn’t show if a user is logged in or not to your ecommerce site.

Add a Woocommerce login logout link to the Woocommerce menu

At times, this can be confusing to your customers. Since most of the popular ecommerce stores (say ebay or Amazon) show a Login button in their menu, customers may expect the same in your e-commerce stores too.

However, in the case of a WooCommerce powered store, a user will need to visit the ‘my account’ page to create an account or check whether he is logged in or not.

woocommerce my account - logout link

In this tutorial, we’ll explain how to add Login/Logout option to the top menu of your WooCommerce store. This is one of the more popular tips and tricks by CollectiveRay.com - so stay tuned if you want to learn more tips and tricks!

Create a Top Primary Menu

Step 1: Before proceeding any further, make sure you have added a menu as a primary menu of your theme. Also make sure you have made a full Wordpress backup in case something goes wrong

If you have not added a menu as a primary menu, log in to your WordPress admin, go to Appearance >> Menu. Under the Menu Settings create a menu and check the “Top primary menu” box.

woocommerce menu

Top tip: If you're not comfortable doing code changes, you might want to consider hiring a WordPress developer. Click here to learn how to hire the ideal WordPress developer: https://www.collectiveray.com/wordpress/wordpress-tips-and-tricks/wordpress-developers-for-hire.html

Step 2: Add the below code to your functions.php file of your theme.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );

function add_loginout_link( $items, $args ) {

  if (is_user_logged_in() && $args->theme_location == 'primary') {

   $items .= '<li><a href="'. wp_logout_url( get_permalink( woocommerce_get_page_id( 'myaccount' ) ) ) .'">Log Out</a></li>';

  }

  elseif (!is_user_logged_in() && $args->theme_location == 'primary') {

   $items .= '<li><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Log In</a></li>';

  }

  return $items;

}

UPDATE: We have just been adviced by a helpful reader of the website who said that wc_get_page_id should now be used instead of the (now deprecated) woocommerce_get_page_id

Verify the Woocommerce login / logout link

Once you've changed the functions.php to add the Woocommerce login / logout links, it's time to result the result of your changes. If you have done the changes correctly, you'll see the result below.

woocommerce login / logout links

You’re done! Now you can see that the Login/Logout option is being displayed in the top menu of your store. This trick is especially useful if you have set up a subscription box based business which we've detailed here.

Now that we've shown you how to do this for WooCommerce, maybe it's time to do the same thing and create a WordPress Logout link. This is often the case if you have decided to disable the admin bar, but still would like the option to sign out, just to be on the safe side.

If you are just looking for a way to end your logged in sessions, simply visit the following on your website.

http://<yoursite.com>/wp-login.php?action=logout 

You will get a small confirmation screen asking "Do you really want to log out?" - once you click on the link, you will be signed out.

WordPress logout screen

As always there are multiple ways to do this. 

The WordPress Logout URL is something you can actually use in your menu, if you want to create a WordPress logout button. Simply link the URL above, and of course, this will allow your user to terminate any current sessions.

Logout menu

WordPress Logout Shortcode

Just like with most functions, you'll find that there is also a plugin which can be used to generate a WordPress Logout Shortcode. Besides the various configurations you can perform, this plugin gives you the ability to use the following shortcodes within your posts and pages.

[logout] - A standard Log Out link, where the user stays on the login screen after being logged out.
[logout_to_home] - A link that logs the user out, and redirects them to your home page.
[logout_to_current] - A link that logs the user out, and redirects them back to the current page/URL.

The plugin also has various options to configure the look and feel and texts, or the actual user experience

.

Anything else you'd like to know about logging out

Is there anything which you'd like to know and is missing is this article? We'd love to get your comments so we can keep making this post better!

Download the list of 101 WordPress tricks every blogger should know

101 WordPress tricks

Click here to Download Now

One more thing... Did you know that people who share AWESOME stuff like this post look awesome too? ;-) Share this on your favourite Facebook group who you think would find this useful and let's reap the benefits together!

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website

New! DIVI 3.1 WordPress Template + PageBuilder

You'll surely create a perfect website with Divi 3.1!

Get an exclusive 10% OFF for CollectiveRay visitors until

Divi 3

 

Monstroid2 (Updated!)

The best-selling template from TemplateMonster has been given an awesome upgrade!

We've got an exclusive 10% OFF for CollectiveRay visitors on Monstroid2 until - use Coupon Code: collectiveray

Monstroid2 Super Update

 

TemplateMonster Bundles

Awesome bundles for awesome websites. $1300 worth of products for $49 only!

We've got an exclusive 10% OFF for CollectiveRay visitors until - use Coupon Code: collectiveray

TemplateMonster Bundles

 

The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get a bundle for just $9 - ONLY!

The Hungry JPEG Awesome font bundles

 

Advertise on CollectiveRay.com

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

 

 

Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale. We usually partner with vendors to make your purchase cheaper than buying direct.

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.

David attard

Follow us on Social

Follow us on Facebook   Follow us on Google+   Subscribe to our RSS Feed   Follow us on Twitter