How to Add a Login/Logout Link to the Main Menu in WooCommerce

WooCommerce is one of the most popular e-commerce plugins for WordPress. If you’re running an online store using WooCommerce, it’s important to make it easy for your customers to log in and out of your site. In this article, we’ll show you how to add a login/logout link to the main menu in WooCommerce without using a plugin.

Why Add a Login/Logout Link to the Main Menu in WooCommerce?

Let’s explore the reasons why this feature is important and why you should consider adding it to your Woocommerce website.

Improved User Experience: Having a login/logout link in the main menu provides a more streamlined experience for users. It allows them to quickly and easily access their account without having to navigate to other pages or menus. This improves the overall user experience and can help to increase customer satisfaction.

Increased Security: By providing a clear and easily accessible login/logout link, users are more likely to log out of their accounts when they are finished using the website. This helps to increase security as it ensures that sensitive information is not left exposed on public computers or devices.

Better Navigation: Adding a login/logout link to the main menu can also improve the overall navigation of your website. It provides a clear and accessible method for users to log in and log out, making it easier for them to access their accounts when they need to.

Improved Accessibility: For users with disabilities, a clear and accessible login/logout link can greatly improve the accessibility of your website. This can help to ensure that all users, regardless of their abilities, can easily access their accounts and manage their information.

Steps to add a login/logout link to the main menu in WooCommerce Store

Please note that do the customization in your child theme. If you haven’t yet created child theme then read this article to create one. If you do not want to edit functions.php file then install a plugin Code Snippets by Code Snippets Pro, and add the code by using this plugin.

Step 1: Access functions.php file.

The first step in adding a login/logout link to the main menu in WooCommerce is to access the functions.php file. You can access this file through your WordPress dashboard by going to Appearance > Theme Editor. Once you’re in the theme editor, select the functions.php file from the list of files on the right-hand side of the screen. Below is the image for your references.

Step 2: Add the Code

Once you’ve accessed the functions.php file, you’ll need to add the following code:

// Add login/logout link to main menu
add_filter( 'wp_nav_menu_items', 'wpamit_loginout_link', 10, 2 );

function wpamit_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') { //change your theme registered menu name to suit
        $items .= '<li><a href="'. wp_logout_url( get_permalink( wc_get_page_id( 'shop' ) ) ) .'">Log Out</a></li>'; //change logout link, here it goes to 'shop', you may want to put it to 'myaccount'
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {//change your theme registered menu name to suit
        $items .= '<li><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Log In</a></li>';
    }
    return $items;
}

This code will add a login/logout link to the main menu in WooCommerce. If the user is logged in, the link will say “Logout.” If the user is not logged in, the link will say “Login.”

Step 3: Save the Changes

Once you’ve added the code, be sure to save your changes. You can do this by clicking the “Update File” button at the bottom of the screen.

Step 4: Check the Results

To check the results of your changes, visit your WooCommerce site and see if the login/logout link has been added to the main menu. If you’re logged in, the link should say “Logout.” If you’re not logged in, the link should say “Login.”

Conclusion

In conclusion, adding a login/logout link to the main menu in WooCommerce is a simple and effective way to improve the user experience of your site. By following the steps outlined in this article, you can add a login/logout link to your main menu without using a plugin, and make it easy for your customers to log in and out of your site.

More Article:
How to Redirect to Custom URL After Logout in WordPress.
Remove Coupon Form from Cart Page WooCommerce.
Display Discount Amount on WooCommerce Product Page.
Display Discount Percentage on Woocommerce product image.