[Resolved] Move Woocommerce Cart icon to be part of the main menu li items.

Home Forums Support [Resolved] Move Woocommerce Cart icon to be part of the main menu li items.

Home Forums Support Move Woocommerce Cart icon to be part of the main menu li items.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1568216
    Daniel

    Hi!

    Since version 3 of Generatepress the woocommerce cart icon is out of #primary-menu div.

    I have made some customizations in the menu of my web using flexbox so that all the li elements inside the main menu occupy the same horizontal space. This change does not affect the cart button because it is out of the main menu.

    My question is, could I make the cart be a li element inside the main menu again in order to apply the same flexbox rule as the rest of the menu items?

    Thanks!
    Daniel

    #1568296
    David
    Staff
    Customer Support

    Hi there,

    can you provide a link to your site so i can see the issue, maybe a simple CSS fix for that.

    #1568325
    Daniel

    Hi David,

    I can’t provide a link to the website because it is not online yet, but I doubt it can be fixed with css only.

    This is the html code for the menu:

    <div id="primary-menu" class="main-nav">
      <ul id="menu-menu-principal" class=" menu sf-menu">
        <li><a href="" aria-current="page">ITEM 1</a></li>
        <li><a href="" aria-current="page">ITEM 2</a></li>
        <li><a href="" aria-current="page">ITEM 3</a></li>
        <li><a href="" aria-current="page">ITEM 4</a></li>
      </ul>
    </div>
    <div class="menu-bar-items">
      <span class="menu-bar-item wc-menu-item  has-items">
        <a href="" class="cart-contents shopping-cart has-svg-icon">CART ICON</a>
      </span>
    </div>

    As you can see, the Cart Icon is outside the #primary-menu.
    I added the property: flex=1 to #primary-menu li items in order to make them the same width regardless of their content but it can’t be applied to the cart icon because it isn’t a child element of the same flex container as the rest of the menu.

    I could declare a fixed width for all the menu items and the cart but then I’ll lose the responsive behaviour when the viewport shrinks.

    #1568732
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Yes, you can filter the menu items like this:

    add_filter( 'wp_nav_menu_items', function( $items, $args ) {
        if ( 'primary' === $args->theme_location ) {
            $has_items = false;
    
            if ( ! WC()->cart->is_empty() ) {
                $has_items = 'has-items';
            }
    
            return sprintf(
                '%1$s
                <li class="wc-menu-item menu-item-align-right %3$s %4$s">
                    %2$s
                </li>',
                $items,
                generatepress_wc_cart_link(),
                is_cart() ? 'current-menu-item' : '',
                $has_items
            );
        }
    
        return $items;
    }, 10, 2 );

    Hope this helps ๐Ÿ™‚

    #1569013
    Daniel

    Great! That’s just what I needed.
    Thank you so much for your help.

    #1569585
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.