Display search results in Pro header

[Mang]

Hi,

1. Our site has a search added to the top bar with code added to customize -> header -> Top Content.

This jss is added to global jss to make the results display like products rather than posts.
jQuery(’.form-search’).append(’’);

We have now moved to Pro header and added a search inline to the header but the search results are displayed as posts rather than like products. Is there a way to achieve the same results with Pro header.

This is the link where the search bar is added to Pro header

Summary

https://dev.mangtum.com/home-kazi

2. Also how can we hide this text. Please see attached.
   
   

Thank you

[friech]

Hi @Mangtum,

Thank you for writing in, yes the search inline element is for posts/pages search. Woocommerce has its own Product Search.

What you need to do is create a sidebar dedicated to product search widget. Place a Product Search widget on that sidebar.

Then on the header, place your sidebar using the Widget Area element.

Hope it helps,
Cheers!

[Mang]

Thank you friech. But with the original header we didn’t have to do this. We were able to add just this simple JS to achieve it. Is there nothing like this in Pro header?

jQuery(’.form-search’).append(‘input type=“hidden” value=“product” name=“post_type” />’);

Thanks

[nabeel]

Hey @Mang,

You can do the same with Search Inline element, first assign a class e.g x-header-search to your Search Inline element and then replace jQuery('.form-search') with jQuery('.x-header-search') in your code:

Please note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Thank you for your understanding!

[Mang]

Thank you Nabeel. That helped.

Best

[marc_a]

@Mang,

It’s our pleasure to help you.

Thank you.