Add login and logout to menu for woocommerce

Posted by on Mar 30, 2015 in Blog, E-Commerce, Woocommerce | No Comments

There are a couple of ways you can do this. I like this as it adds the login and logout as 1 menu item, the state of which changes if the user is logged in or not. The code below is from a git, Credit to Kloon. I made a slight update as “woocommerce_get_page_id” is deprecated and now you should use “wc_get_page_id”

You need to find out the name of the “theme_location” for your menu in your theme. Probably in header.php you will see something like the code below. In this case ‘theme_location’ => ‘navigation’. So I changed the code from git to use ‘navigation’ instead of ‘primary’.

<?php wp_nav_menu( array( 'menu' => '', 'container_class' => 'navigation', 'container_id' => 'mainmenu', 'menu_class' => 'toplevel', 'theme_location' => 'navigation' ) ); ?>

So the code becomes this. It goes in your functions.php file in your child theme. You should use a child theme. See the note at the bottom of this post if you do not know what that is.

<?php
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 == 'navigation') {
			$items .= '<li><a href="'. wp_logout_url( get_permalink( wc_get_page_id( 'myaccount' ) ) ) .'">Log Out</a></li>';
	}
	elseif (!is_user_logged_in() && $args->theme_location == 'navigation') {
			$items .= '<li><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Log In</a></li>';
	}
	return $items;
}
?>

This gives you a simple link. No styling so it does not sit in the menu properly. I added the classes I saw for other menu items when I checked my pages html. I needed to add classes to the ‘li’ and ‘a’ tags. It does not account for current page classes etc but that does not really come into play in this situation as the actual page is My Account which is where the site goes when you click either one. I may make this translation friendly one day too.

<?php
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 == 'navigation') {
			$items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page"><a class="menu-link" href="'. wp_logout_url( get_permalink( wc_get_page_id( 'myaccount' ) ) ) .'">Log Out</a></li>';
	}
	elseif (!is_user_logged_in() && $args->theme_location == 'navigation') {
			$items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page"><a class="menu-link" href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Log In</a></li>';
	}
	return $items;
}
?>

Tools:

You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

Child Themes

You want to change code in a way that will not be over-written when you update your theme. So if you do not already have one you should setup a child theme. I always do this if I am making any changes to the main theme, even if it is only CSS. That is not the topic of this post so here is a link to a tutorial on creating a child theme, you will find the WordPress codex article here.

Leave a Reply