WP Menu Cart Next to Navigation Search Icon on Mobile Navigation/Display

Hi Zoey,

Can you show me what you have so far using that plugin?

Happy to hear you're enjoying GP! :)

Hello Tom,
Thanks for replying. I have it on my primary navigation. On desktop display, it appears right next to the search icon but when on mobile display, it's hidden away in the mobile menu. This is the link to my website, https://www.twelvefishermen.co/

Ah, we would need a function to display it in the menu bar as it's not a menu.

Looks like they provide a shortcode in the pro version.. Might be worth asking if they have a function you can use, although they might not want to give it up as it's a pro feature.

Oh I see. Still don't want to give up yet. I'm going to try some other way.

So I searched the web and came across some tutorials on how to add the shopping cart icon. I'm going to give them a try and see if any one works.Thanks so much Tom for taking your time to help me =)

It's me again. I found a plugin that offers shortcode for the shopping cart. I tried it on GP hooks and it appears on the website. Is there a way I can do to get the shortcode/shopping cart next to the search icon? Thanks!

The shortcode, [cart_button show_items="true"] from the WooCommerce Cart Count Shortcode plugin.

Hi Zoey,

Maybe something like this will help? https://en-ca.wordpress.org/plugins/shortcode-in-menus/

Let us know.

Hello Leo,
Thank you for you suggestion. I've tried it but since the icon was together with the menu, it was hidden away in the mobile navigation. I'm trying to have the cart icon next to the search icon while on mobile display.

Hi Zoey,

You could do this:

add_action( 'generate_inside_mobile_menu_bar','tu_add_to_mobile_bar' );
function tu_add_to_mobile_bar() {
?>
    <div class="mobile-cart">
        <?php echo do_shortcode( '[your-shortcode]' ); ?>
    </div>
<?php
}

Then some CSS:

.mobile-cart {
    float: right;
}

Hello Tom,
It works! Thank you so much but how do I make it appear in the menu bar on desktop display without having it in the primary menu. So, when I switch to mobile display, I won't have two shopping carts. Thanks again!

Give the cart inside your menu a custom class: hide-on-mobile

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

That should do it :)

That works like a charm! Thanks so much Tom for your help! Thanks to Leo too!

Best regards,
Zoey

Glad we could help :)