wooCommerce Nav Menu

Hi there,

1. You should be able to modify the menu in the topbar at appearance > menus, and paste the SVG icon’s HTML code to the menu label field, then use CSS to adjust its size.

2. How and where can I see the Logout link?

It’s doable, but it requires some coding. Try following the below steps:

1. Go to appearance > menus, edit the navigation that you added to the topbar, add a custom link with URL set to #, navigation label set to [show_username], and CSS classes to logged-in-user-name.

Here’s a screenshot for your reference: https://app.screencast.com/zqkaEEzKEs01p

For the CSS classes field, you need to tick it after opening the screen options:https://app.screencast.com/KxdioBbejZrI3

2. Add this PHP code to create the shortcode and enable the support of shortcode for menu item label field:

function show_logged_in_username() {
    // Check if the user is logged in
    if (is_user_logged_in()) {
        // Get current user info
        $current_user = wp_get_current_user();
        // Display the user's display name
        return 'Logged in as ' . esc_html($current_user->display_name);
    } else {
        // Show nothing for users who are not logged in
        return '';
    }
}

// Register the shortcode
add_shortcode('show_username', 'show_logged_in_username');

function enable_shortcodes_in_menu($title, $item, $args, $depth) {
    // Process shortcodes in the menu title
    if (has_shortcode($title, 'show_username')) {
        $title = do_shortcode($title);
    }

    return $title;
}
add_filter('nav_menu_item_title', 'enable_shortcodes_in_menu', 10, 4);

Adding PHP: https://docs.generatepress.com/article/adding-php/

3. Add this CSS to hide the “logged in as” menu item when users are not logged in:

body:not(.logged-in) .logged-in-user-name {
    display: none;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this works!

You are welcome   🙂