Add extra items to WooCommerce cart menu

Hi there,

I'm not quite sure what you mean.

Are you wanting those on WooCommerce cart page?

If so there are a lot of WooCommerce cart page hooks included in our Hooks Element:
https://docs.generatepress.com/article/hooks-element-overview/

Hello Leo,

Sorry I am referring to this menu in here and it needs to be throughout the site:

https://gpsites.co/target/

Best regards,

I'm still confused. The title of this post is "Add extra items to WooCommerce cart menu", but you actually want to know how to replicate the header/navigation layout of Target?

Hello again,

No I managed to replicate that menu using GP Site Library. Now I want to find out how to add a few extra items to WC cart area of that menu. Something similar to the screenshot that I shared earlier.

Thanks and regards,

Is this what you are looking for?
https://docs.generatepress.com/article/adding-icons-to-menu-items/
https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right

Not really. Those links you've provided, did help me to add a couple of items to the right hand side of the main menu. What I am trying to achieve is something like this. Please have a look in here (https://www.dropbox.com/s/wtol6irhmcx3w3t/menu-screenshot.png?dl=0) Is there a way that I can move the 2 right-most items (highlighted in red), to the left hand side of the cart icon?

Hi there,

if you can add those menu item icons to your site giving each of the menu items a custom class so we can target them. Then share a link to the site we can help position them with some CSS.

Please see here for the development instance. Custom classes are 'menu-item-wishlist' and 'menu-item-account'. Many thanks in advance.

For you social links can you give them both the class of menu-item-social

I am assuming that the main navigation will be centered. And will be:

Home Shop About Contact Search

Pushed to the right will be:

Account Wishlist Cart -- space -- Facebook Twitter

Just added the classes to social links. Yes that's the layout I have in mind. Many thanks in advance!

Try this CSS:

@media (min-width: 768px) {
    .main-navigation ul {
        display: flex;
    }
    .nav-aligned-center .main-navigation ul li.menu-item-social {
        order: 20;        
    }
    .nav-aligned-center .main-navigation ul li.menu-item-social a {
        padding-left: 10px;
        padding-right: 10px;        
    }
    .nav-aligned-center .main-navigation ul li.menu-item-account, 
    .nav-aligned-center .main-navigation ul li.menu-item-wishlist,
    .nav-aligned-center .main-navigation ul li.wc-menu-item {
        order: 10;
    }
    .nav-aligned-center .main-navigation ul li:first-child,
    .nav-aligned-center .main-navigation ul li.menu-item-account {
        margin-left: auto;
    }
    .nav-aligned-center .main-navigation ul li.wc-menu-item {
        margin-right: 25px;
    }

}

Many thanks David! It worked like a charm.

Awesome. Glad to be of help.