cart and search widgets

[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?

[Leo]

Hi 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/

[Hamid]

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.

[Leo]

We 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/

[Hamid]

Hi Leo
I have now inserted both widget in header.

[Leo]

Actually, 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/

[Hamid]

Thx. Perefect. It was simple to create and worked perfectly.

[Leo]

No problem 🙂

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

[Author]

Posts