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

[Zoey]

Hello Tom,
First of all, I want to say that I love GeneratePress so much. It makes making website so much easy, so thank you so much!

I only have the very basic knowledge of coding, so I need your help to figure out how to make my shopping cart appear next to the search icon on mobile navigation/display. I’m using WP Menu Cart plugin. I searched for it everywhere but just still can’t find a way to do it. I hope it’s possible and thanks so much for your help!

Kind regards,
Zoey

[Tom]

Hi Zoey,

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

Happy to hear you’re enjoying GP! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zoey]

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/

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zoey]

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 =)

[Zoey]

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.

[Leo]

Hi Zoey,

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

Let us know.

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

[Zoey]

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.

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zoey]

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!

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zoey]

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

Best regards,
Zoey

[Tom]

Glad we could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts