Shopping Cart Icon next to search in header

Hi Darren,

Can you add in the Cart widget in header widget first?

Looking at your current layout, I would recommend considering doing this: https://docs.generatepress.com/article/split-header-three-sections/

Let me know :)

hi leo

Think I might have opened up a can of worms with those directions, I cant get out of this it seems to advanced, just want to get back to the way it was and add a cart icon as described.

Thanks

Darren

Let's give this a shot first as it's not too difficult.

- In the header-left div, replace the capital letters with your actual info, like URL to your website, URL of your logo etc

- Download the widget shortcode plugin: https://en-ca.wordpress.org/plugins/widget-shortcode/ and use it to turn the Search product widget and cart widget into shortcodes

- Replace "header center content" in header-center div with the search product shortcode from above

- Replace "header right content" in header-right div with the cart shortcode from above

That should be it. Let me know.

Hi Leo

Many thanks, if you have a look I have put the widget codes in and have removed the cart from the actual header, the only issue is that when I remove the search bar I loose the rounded edges and it doesn't align properly.

Can you give me a work around for the search alignment and custom settings (lining things up) but also for all the custom css on the search bar.

Also any hints on how I can make the basket look like a shopping cart.

Thanks D

Leo

It seems that the custom CSS is still working on the search bar, just need the info on the alignment/ proportions of the three sections and how to centre stuff.

Is any of the old custom CSS now redundant?

Thanks

You can try this CSS to put the button inline:

.widget .search-field {
    width: 200px;
}

As for making the basket looking like shopping cart, you'd have to ask WooCommerce to see if they have a filter for that.

Hi Leo

I added the
.widget .search-field {
width: 200px;
}

Its made the search bar too small and the shopping cart has too much padding around it, could you tell me if I can adjust those section widths so that the site has a max width of 1100 px which is what I set it too. it seems adding those dividers in the header has made the whole site wider than it was.

Regards

Darren

PS whats the command to give the whole search bar 25px top padding to centralise top and botton

Leo

Ideally I want the search products area to be around 600px wide and 15-20px tall,

Hi Leo

I re produced the header in Elementor and managed to line things up, I've used the woocommerce product search widget which is still responding to the CSS we put in previously. I just want to make the search area bigger, is there a CSS for that

Thanks

Darren

Try this:

input#woocommerce-product-search-field-0 {
    width: 300px;
}

Thanks Thats great works a treat

No problem :)