- This topic has 13 replies, 3 voices, and was last updated 7 years, 2 months ago by
.
-
Posts
-
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!
Customer Support
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:
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,
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?
Customer Support
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-socialI am assuming that the main navigation will be centered. And will be:
Home Shop About Contact SearchPushed to the right will be:
Account Wishlist Cart -- space -- Facebook TwitterJust 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.
- You must be logged in to reply to this topic.
