[Resolved] cart and search widgets

Home Forums Support cart and search widgets

  • This topic has 7 replies, 2 voices, and was last updated 1 month ago by Leo.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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?

    #1420696
    Leo
    Staff
    Customer Support

    Hi there,

    I only see the search widget in the header widget area currently.

    Can you add in the cart widget as well?

    #1422751
    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.

    #1423202
    Leo
    Staff
    Customer Support

    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?

    #1423418
    Hamid

    Hi Leo
    I have now inserted both widget in header.

    #1424044
    Leo
    Staff
    Customer Support

    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 🙂

    #1424071
    Hamid

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

    #1424147
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.