Woocommerce login and logout menu options

Question

I'm using WooCommerce with my wordpress site and I want to allow customers to login and logout if they wish so that they can see their account details of what they have ordered.

So what I want to do is present a Login button on the top menu when the shop page is being displayed. I also want the login button to know if the customer is logged in and then to change to a log out button.

On Woocommerce support they have stated that they are no longer using shortcodes for logout functionality but rather endpoints. Here is the details https://support.woothemes.com/hc/communities/public/questions/201174057-No-way-for-a-customer-to-log-out-Woocommerce-account-widget

However, this doesn't work as expected. So my question is 1. How to make the logout/login button detect if the user is a logged in customer. 2. How to make a custom menu for just the shop page only (I don't want the login/logout button to appear on all menus throughout the site)

Many thanks in advance

Answer 1

You don't need shortcodes or endpoints... or WooCommerce at all. wp_loginout() is a core WordPress function that shows a login link if you aren't logged in and a log out link if you are.

In the codex there is an example of how to add a login/out link to a menu.

Simply add this code to your parent or child themes functions.php file to display a loginout link in the secondary navigation menu of the Twenty Fourteen default theme for WordPress.

add_filter( 'wp_nav_menu_secondary_items','wpsites_loginout_menu_link' );

function wpsites_loginout_menu_link( $menu ) {
    $loginout = wp_loginout($_SERVER['REQUEST_URI'], false );
    $menu .= $loginout;
    return $menu;
}

The secondary in wp_nav_menu_secondary_items is, I believe, what is adding the item only to the menu with the ID of secondary. You can target whatever menu you'd like in this way. Or you can remove it and add the link to all menus via wp_nav_menu_items.

Answer 2

Important - Please BACKUP your wordpress files and databases before editing header.php

Try placing this code in your 'header.php'

Change "www.yoursite.com" to your website name

<!-- start of by me -->
<?php
add_action( 'loop_start', 'personal_message_when_logged_in' );

function personal_message_when_logged_in() {

    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        echo $current_user->user_login;
    } else {
    $items .= '<a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Register</a>';
        echo $items;
    }

}

add_action( 'loop_start', 'login_logout_status' );

function login_logout_status() {
    if ( is_user_logged_in() ) {
    $login_status .= '<a href="http://www.yoursite.com/my-

account/customer-logout/">Log out</a>';
    echo $login_status;
    } else {
    $items .= '<a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Log in</a>';
        echo $items;
    }
}
?>

<ul class="headerlinks">
<li><?php personal_message_when_logged_in(); ?></li>
<li><?php login_logout_status(); ?></li>
</ul>

<!-- end of by me -->

Styles

/* start of my style */
ul.headerlinks {
    position:relative !important;
    float: right;
    z-index:500 !important;
    background-color: #e3e3e3;
    margin-bottom: 10px;
}
ul.headerlinks li {
    list-style: none !important;
    display:inline !important;
    margin:0 5px 0 0 !important;
    padding:0;
}
/* end of my style */