- This topic has 7 replies, 2 voices, and was last updated 6 months, 1 week ago by
Leo.
-
AuthorPosts
-
August 27, 2020 at 2:31 am #1420053
Hamid
Hi
I wish to place the search widget on the left side of the logo and the cart widget on the right side of logo in header section.
Currently, the cart icon is visible on the right side of main menu which I wish to remove and place it together with the cart widget in the header.
I inserted both woocommerce cart and search widgets in the header sections but both are displayed on the right side of the header section and it became quite messy.
Would you please advise how to display “Search – logo – Cart” in the same order in the header for desktop and mobile version?August 27, 2020 at 8:38 am #1420696Leo
StaffCustomer SupportHi there,
I only see the search widget in the header widget area currently.
Can you add in the cart widget as well?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 29, 2020 at 4:16 am #1422751Hamid
Hi Leo
I know, only widget currently displayed is the Search widget.
The web site is active, inserting the cart widget would not be appropriate as the look is going to be not nice.
As I understand there is one way to disable the header element and create a new one. I tried to read the documentation for creating a header element but not succeeded to create a new header element that can be displayed. Reason is quite simple, lack of knowledge and experience.
The current header widget area can be adjusted to left or right by customized css; i.e
.header-widget {float: left;}. But when you insert two widgets, both are displayed after each other either before(left adjusted) or after (right adjusted) while the logo is still in the center area.
I enclose a picture how I wish to have my header to be. Probably it requires coding of some how? The standard woocommerce widgets for search and cart is not the one I have in my mind, however adjust/modify them is the next step in future.August 29, 2020 at 10:10 am #1423202Leo
StaffCustomer SupportWe can use some CSS to tweak the layout but I would need to see both widgets added to be able to provide the correct CSS.
Any chance you can start a staging site for it?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 29, 2020 at 3:29 pm #1423418Hamid
Hi Leo
I have now inserted both widget in header.August 30, 2020 at 8:54 am #1424044Leo
StaffCustomer SupportActually, there is a better way to do this than just using CSS.
You can create a block element:
https://docs.generatepress.com/article/block-element-overview/And in block type, choose Site Header.
Then you can use the grid block from GenerateBlocks to create to 3 columns (can either do 33/33/33 or 20/40/20):
https://docs.generateblocks.com/article/grid-overview/Then to insert WooCommerce widget, use a plugin like widget shortcode:
https://en-ca.wordpress.org/plugins/widget-shortcode/Let me know if you need more info π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 30, 2020 at 9:16 am #1424071Hamid
Thx. Perefect. It was simple to create and worked perfectly.
August 30, 2020 at 10:18 am #1424147Leo
StaffCustomer SupportNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.