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

[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

[David]

Hi there,

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

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

[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.

[Tom]

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 🙂

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

[Daniel]

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

[Tom]

You’re welcome 🙂

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

[Author]

Posts