Woo commerce search in X pro header

Hi
I am using pro headers. I want to add the woo commerce search to the pro header. The woo commerce search is available as a widget. I want a magnifying glass icon in the header that opens a search bar and for that search to be the woo commerce search displaying products as the results, as the widget does.

Is there any way to do this? I am happy to override the way the normal search works so that all searches on the site are woo commerce ones.

Thank you.
Tamsin

Hey Tamsin,

You can use the Search Modal element. See https://theme.co/apex/forum/t/pro-search-modal-element/107

To filter search results, please add this code in your functions.php

function product_only_search($query) {
if ($query->is_search) {
$query->set('post_type', 'product');
}
return $query;
}

add_filter('pre_get_posts','product_only_search');

Thanks.

Hi Christian

Thank you for getting back to me. The problem is the way the results show. If I use the woo search widget then the result show as products. If I use the search modal - even if I add the filter function you gave me - the results show as posts and it doesn’t look good for a shop.

Can you help?

Tamsin

Hi there,

Would you mind providing the site’s URL that has this issue? And your FTP login credentials as well in a secure note.

I’m not sure about the widget, since it’s Woo then it should display products. So I’m wondering if your referring to ajax result.

Thanks!

I have replied in a secure note. Ignore the summery bit - I was just trying to work out how to do a secure note - got there now.

Thanks, I hope you can help.
Tamsin

Hi there,

I tried to access your website but unfortunately, the dashboard is not available and it redirects me to the account page. Would you please kindly tell us how we can access the Wordpress Dashboard?

Also, I wonder if the method below will be helpful:

1- Go to Appearance > Sidebars
2- Add a Sidebar Called Woo Widget Header
3- Go to Appearance > Widgets and add the Woo Search widget to Woo Widget Header widget area.
4- Go to Pro > Launch > Header and select the header you want to have the search on.
5- Add the Widget Element there and set the item to show the Woo Widget Header.

Thank you.

Sorry I had set the user to the wrong level. It is right now so please try to log in again.

I have tried the method you suggested and it is fine BUT I do not want the whole search bar and input field in the header, I just want a magnifying glass icon that when pressed brings up a search window or modal.

Can you help?

Thank you.

Tamsin

Could you also please confirm for me if I have to pay extra to link to worldpay? It is offered as a plugin to woocommerce but I wasn’t sure if this is included or if I have to pay extra for it. Thank you.

The search question above is the most urgent though, thanks.

Tamsin

Hey there,

Sorry for the confusion. Since the snippet given here doesn’t work, this would mean you’ll need a different function or a plugin for your use case. There are plugins like SearchWP that offers a configurable search bar and a search results page feature. You can put the shortcode in a Content Modal element. Regretfully, the overall setup is outside the scope of our support. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Regarding worldpay, that is a third party plugin and it’s not included in X. Please contact the plugin developer for more info.

Thank you for your understanding.

Thank you. In the end I installed a plugin that allowed me to add a widget using shortcode, then I added the shortcode to a content modal with the search icon.

Thank you

Tamsin

Thank you for sharing what works for your setup Tamsin!

You’re always welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.