Archived topic
Woocommerce mini-cart - header created with Block Template
5 replies · Started by Adrian on March 31, 2021
Hi, here is my test page: https://aktestawodomena4.pl/
I am currently using Block Template to create fully custom header. The problem I ran into was the location of the mini-cart from the woocommerce plugin. By default, this widget can only be used in the Primary and Secondary Menu. But for me, creating a fully custom header, I can't put this widget in the place I want. My aim is that the mini-cart widget is to the right of the logo.
Is there any way to move this cart to this location?
Hi Adrian,
I'm not able to open your site, could you check if there's any typo?
Let me know :)
hi sorry but i had to make a mistake. here is the correct address: https://aktestowadomena4.pl/
I don't think it's possible based on the structure you are setting currently.
According to your needs, check the screenshot below, I would recommend:
https://www.screencast.com/t/kke0tJFJ1xLK
1. Use Block element (before_header hook) for A, B.
2. Use primary navigation + block element (menu_bar-items hook) for C.
center logo: https://docs.generatepress.com/article/centering-logo-navigation/
3. Use secondary navigation for D.
Let me know how it works :)
Hello again :) I was inspired by what you wrote and something like this came out: https://aktestowadomena4.pl/. With the difference that I created what is on the left side of the logo using the block with the hook "generate before logo". I don't know if I did the right thing to the right of the logo. The cart and searchbar are generated automatically in the main menu, and the user and hearts icon was added with the "menu bar items" hook and position it accordingly. is this a good solution? Is there anything that could be improved and done better?
Thank you very much for help :)
Very nicely done! Congrats :)
The before_logo hook is a good call.
If there's anything to be improved, I think it's the wishlist and account icons.
I would recommend using the Buttons block from Generateblocks to add these 2 icons, you can remove the text for these 2 buttons.
https://docs.generateblocks.com/article/buttons-overview/#icon
GB has some built-in SVG icons for buttons block, you can also use custom icons, check this demo video below for how to add a custom SVG icon to a GB button.
https://www.youtube.com/watch?v=wdzFximLiQs&ab_channel=GenerateBlocks
Hope my tips are helpful:)
