Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #322570

    Used the code in this: https://kriesi.at/support/topic/woocommerce-account-loginlogout-not-wp-account/?login_error

    Very helpful but when I hover over the new menu items (Log In / Register, My Account, Log Out), the link is not underlined in the same way as the rest of the menu items are. How can I fix this?

    Thanks!

    #322571

    Ok, fixed the blue upon hover by modifying the code to:

    add_filter( 'wp_nav_menu_items', 'add_loginout_link', 3, 2 );
    function add_loginout_link( $items, $args ) {
        if (is_user_logged_in() && $args->theme_location == 'avia') {
            $items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level "><a href="'. get_permalink( wc_get_page_id( 'myaccount' ) ) .'">My Account
    	<span class="avia-bullet"></span>
    	<span class="avia-menu-fx">
    		<span class="avia-arrow-wrap">
    			<span class="avia-arrow"></span>
    		</span>
    	</span>
    </a>
    </li>';
            $items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level "><a href="'. wp_logout_url( get_permalink( wc_get_page_id( 'myaccount' ) ) ) .'">Log Out
    	<span class="avia-bullet"></span>
    	<span class="avia-menu-fx">
    		<span class="avia-arrow-wrap">
    			<span class="avia-arrow"></span>
    		</span>
    	</span>
    </a>
    </li>';
        }
        elseif (!is_user_logged_in() && $args->theme_location == 'avia') {
            $items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level "><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Log In / Register
    	<span class="avia-bullet"></span>
    	<span class="avia-menu-fx">
    		<span class="avia-arrow-wrap">
    			<span class="avia-arrow"></span>
    		</span>
    	</span>
    </a>
    </li>';
        }
        return $items;
    }

    However, the blue line usually shows up as solid when you’re on that page and it doesn’t carry through for the pages I added using the code below (e.g. If I’m on the “About” page, the “About” header will be underlined. If I’m on the “My Account” page, which I’ve added through the above, the “My Account” link remains without decoration.)

    It looks like the main issue is that the CSS class for that link is not updating. Any other page has:
    li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-3328 current_page_item menu-item-top-level "

    whereas the pages I just created don’t update the class and retain:
    li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level "

    This suggests to me that the code provided above isn’t inserting itself properly into the avia functions. Can you advise on how to add the “Log In / Register,” “My Account,” and “Log Out” pages properly?

    Thanks!

    #322846

    Hi!

    Thank you for the info.

    I tested this code on my installation and it automatically add the current-menu-item class whenever I clicked the links. Did you set the menu as Enfold Main Menu on Appearance > Menus panel?

    Regards,
    Ismael

    #329407

    Yes, the menu is set as Enfold Main Menu on Appearance > Menus panel. The underline is only broken on the links I hacked aka the “Log in / Register” button where I used the code from https://kriesi.at/support/topic/woocommerce-account-loginlogout-not-wp-account/?login_error

    For instance, try doing this to duplicate what I’m seeing:
    1. Click “Log in / Register.”
    2. When the page loads, you’ll note that the blue underline is missing under “Log in / Register.”
    3. Click “Browse meals.”
    4. When the page loads, you’ll note that there is a blue underline under “Browse meals.” This is my desired behavior for all menu items.

    Hope that helps clarify the problem. Appreciate the help!

    #330023

    Hey!

    Yes, I used the code and it works fine. I guess the difference is you set the login page as secured or https. Try to use this code instead:

    /*
     * Add WooCommerce Login/Logout to avia2 menu
     */
    add_filter( 'wp_nav_menu_items', 'add_loginout_link', 3, 2 );
    function add_loginout_link( $items, $args ) {
        if (is_user_logged_in() && $args->theme_location == 'avia') {
            $items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level "><a href="'. get_permalink( wc_get_page_id( 'myaccount' ) ) .'">My Account
    	<span class="avia-bullet"></span>
    	<span class="avia-menu-fx">
    		<span class="avia-arrow-wrap">
    			<span class="avia-arrow"></span>
    		</span>
    	</span>
    </a>
    </li>';
            $items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level "><a href="'. wp_logout_url( get_permalink( wc_get_page_id( 'myaccount' ) ) ) .'">Log Out
    	<span class="avia-bullet"></span>
    	<span class="avia-menu-fx">
    		<span class="avia-arrow-wrap">
    			<span class="avia-arrow"></span>
    		</span>
    	</span>
    </a>
    </li>';
        }
        elseif (!is_user_logged_in() && $args->theme_location == 'avia') {
            $items .= '<li class="login-register menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level "><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Log In / Register
    	<span class="avia-bullet"></span>
    	<span class="avia-menu-fx">
    		<span class="avia-arrow-wrap">
    			<span class="avia-arrow"></span>
    		</span>
    	</span>
    </a>
    </li>';
        }
        return $items;
    }

    Add this on Quick CSS or custom.css:

    li.login-register span.avia-menu-fx {
    opacity: 1;
    visibility: visible;
    }

    Cheers!
    Ismael

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.