Site logo

Archived topic

One Row Mobile Navigation

21 replies · Started by Daniel on March 22, 2021

Viewing posts 16–22 of 22

Thats good :) so you can remove that.

Then try changing this:

add_action( 'wp', function() {
    add_action( 'generate_menu_bar_items', 'generate_wc_do_cart_menu_item', 5 );
} );

To:

add_action( 'wp', function() {
    add_action( 'generate_menu_bar_items', 'generate_wc_do_cart_menu_item', 5 );
}, 100 );

Yes :) But the mini cart does still not appear in the mobile view :/ Let me make a short summary. I have embedded these two snippets into my functions.php

add_filter( 'generate_woocommerce_menu_item_location', function() {
	return 'secondary';
} );

add_action( 'wp', function() {
    add_action( 'generate_menu_bar_items', 'generate_wc_do_cart_menu_item', 5 );
}, 100 );

Also I added the css lines from Ying:


@media (max-width: 768px) {
    nav#secondary-navigation {
        display: none;
    }

    .menu-bar-items {
        order: 3;
    }
}

After these lines of code, the mini cart item is still not be visible on mobile view. Sorry :(

Tricky one, you've found a limitation in the code. When it was written, it was never anticipated that someone would want it to be both in the primary and secondary navigations.

So, that means we need to create our own function from scratch:

function tu_custom_wc_menu_item() {
    if ( ! class_exists( 'WooCommerce' ) ) {
        return;
    }

    if ( ! isset( WC()->cart ) ) {
        return;
    }

    $has_items = false;

    if ( ! WC()->cart->is_empty() ) {
        $has_items = 'has-items';
    }

    printf(
        '<span class="menu-bar-item wc-menu-item %2$s %3$s">
            %1$s
        </span>',
        generatepress_wc_cart_link(),
        is_cart() ? 'current-menu-item' : '',
        $has_items
    );
}

Now replace this:

add_action( 'wp', function() {
    add_action( 'generate_menu_bar_items', 'generate_wc_do_cart_menu_item', 5 );
}, 100 );

With this:

add_action( 'wp', function() {
    add_action( 'generate_menu_bar_items', 'tu_custom_wc_menu_item', 5 );
}, 100 );

Hi Tom, thank you very much for your great support. It works! ;) One last thing follows: I have now two mini carts on the desktop. I don't would like the mini cart in the off canvas, that's because we use this snippet:

add_filter( 'generate_woocommerce_menu_item_location', function() {
	return 'secondary';
} );

But after adding your last code snippets, I have two mini carts on desktop. Thanks a lot for your help!

Hi there,

That duplicate cart shows because of this:

add_action( 'wp', function() {
    add_action( 'generate_menu_bar_items', 'tu_custom_wc_menu_item', 5 );
}, 100 );

Let's modify it to this:

add_action( 'wp', function() {
    remove_action( 'generate_secondary_menu_bar_items', 'generate_wc_do_cart_secondary_menu_item', 5 );
    add_action( 'generate_secondary_menu_bar_items', 'tu_custom_wc_menu_item', 5 );
}, 100 );

So the cart on the secondary menu gets replaced with the custom function you've created.

Hi Elvin, thank you for your reply! I embedded your snippet, but now the mini cart on mobile is gone ... it's strange.

Ahh I see now. Your mobile header was using that.

Let's revert to this code:

add_action( 'wp', function() {
    add_action( 'generate_menu_bar_items', 'tu_custom_wc_menu_item', 5 );
}, 100 );

And do the CSS approach which is this:

nav#site-navigation .wc-menu-item {
    display: none;
}

This way, the cart icon on nav#mobile-header isn't affected.

This archived topic is closed to new replies.