[Resolved] Shopping Cart Icon next to search in header

[Darren]

Hi Leo

Could you assist with creating a shopping basket Icon inline but to the right of search bar a bit like this site, https://www.studiocare.com/

Many Thanks

[Leo]

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 🙂

[Darren]

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

[Leo]

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.

[Darren]

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

[Darren]

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

[Leo]

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.

[Darren]

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

[Darren]

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

[Darren]

Leo

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

[Darren]

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

[Leo]

Try this:

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

[Darren]

Thanks Thats great works a treat

[Leo]

No problem 🙂

[Author]

Posts