Add site search to storefront

Your best bet would be to overwrite the core storefront_product_search() function (which just calls the WooCommerce search widget) with your own which calls an all-encompassing search form.

I recommend making changes like this in a plugin or child theme.

Do note however that search results will then be displayed in post format. This probably won’t work very well for products.

I’ve done that and actually it’s fine. I made a change to use the WP search for information pages/blog and the WC search woocommerce pages which works great except that the styling is different. I tracked this to the fact that the WC search has a class of widget_product_search which I would like to change to be widget_search to match the WP search form.

My problem is how to effect that change. I need to override the widget_cssclass in the WC_Widget_Product_Search widget. Any idea how to go about this in my child theme?

It’d probably be easier to just copy/paste the CSS applied to the product search and apply that to the class assigned to the regular search.

It’s not quite as simple (as you might expect) but that works fine. I was trying to avoid that in case the WP search was amended in storefront for some reason. Cheers.
Just for info this was what I added to my child css

.site-search .widget_product_search input[type="search"], .site-search .widget_product_search input[type="text"] {
    line-height: 1;
    padding: 0.618em 0.618em 0.618em 2.618em;
}
.site-search .widget_product_search form:before{top:0.618em;left:1em}