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

Home Forums Support [Resolved] WP Menu Cart Next to Navigation Search Icon on Mobile Navigation/Display

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

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #265009
    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

    #265043
    Tom
    Lead Developer
    Lead Developer

    Hi Zoey,

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

    Happy to hear you’re enjoying GP! πŸ™‚

    #265178
    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/

    #265262
    Tom
    Lead Developer
    Lead Developer

    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.

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

    #265374
    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.

    #265401
    Leo
    Staff
    Customer Support

    Hi Zoey,

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

    Let us know.

    #265422
    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.

    #265455
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #265603
    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!

    #265647
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #266152
    Zoey

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

    Best regards,
    Zoey

    #266229
    Tom
    Lead Developer
    Lead Developer

    Glad we could help πŸ™‚

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