Make search bar longer

Hello tankman15,

=> Put below css code into Additional CSS textarea (Dashboard >> Apperance >> Customize) then click on Save & Publish button.
=> If there is no Additional CSS option then put below css code into your current theme’s style.css file located at wp-content/themes/your_current_active_theme/ folder


#masthead .site-search .widget_product_search input[type="search"] {
width:600px
}


Note : All Changes you done in style.css or other file are gone when you update theme. So prefer Child Theme

Hope this will helps you.

That works brilliantly. Thank you.

ps. I have a child theme otherwise when an update is done we would lose all our changes. Thank you for the advise.

great can you please help how to bring search in center ?

That is a great question. I am more than happy to help but I think it would be better to be in a new thread, that way we can help more people.

Please start a new thread and I will answer it.

Hello ashishyadav400,

Try below css.


.woocommerce-active .site-header .site-search {
width: 44.739%;
}
#masthead .site-search .widget_product_search input[type="search"] {
width: 700px !important;