[Resolved] Add extra items to WooCommerce cart menu

[Pradeep]

Hello there,

Could you kindly guide me how to achieve a WooCommerce cart menu layout similar to the mockup I’ve added in here please?

Many thanks in advance!

[Leo]

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/

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

[Pradeep]

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,

[Leo]

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?

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

[Pradeep]

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,

[Leo]

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

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

[Pradeep]

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?

[David]

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.

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

[Pradeep]

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

[David]

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

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

[Pradeep]

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

[David]

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

}

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

[Pradeep]

Many thanks David! It worked like a charm.

[David]

Awesome. Glad to be of help.

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

[Author]

Posts