-
Posts
-
Hi
I have been looking through various threads in the matter of changing the default search magnifying class icon with a search field/bar but the various solutions I have found have not worked.
Including an Enfold setting to instead use the search field would be helpful.
This is the site: https://labhuset.no/
It uses: Enfold Version: 5.6.8
WordPress: 6.3.2
WooCommerce version 8.2.1I have installed and activated: “FiboSearch – AJAX Search for WooCommerce” to make search show up with more details as well as be able to get WooCommerce categories, tags, content etc into the search.
I now need to be able to show the Search field instead of the Search icon in the header where the icon can be seen today. https://labhuset.no/
Thank you!
Hey Silje,
Thank you for the link to your site, does your ‘FiboSearch’ plugin offer a shortcode to display the search field? If so you could add a header widget area for it, please see our documentation here. Another option mat be to add the ‘FiboSearch’ shortcode as menu item, in the navigation label.
Then to hide the default search icon you can disable it at Enfold Theme Options ▸ Main Menu ▸ General ▸ Append search icon to main menuBest regards,
MikeHi Mike
The following seems like the easiest method.
1-
I turned off Append Search Icon To Main Menu in the Enfold Theme Options.2-
WooCommerce -> FiboSearch -> Starting.
Turned off the Search bars to replace Enfold with the FidoSearch.3-
Added the Custom Link FiboSearch bar to the menu her.
Used Layout: Default. Menu Style: Default.Results. Search field or Search icon can for a very short moment be seen to the left of the top menu here. Just to the left of the Hjem / Home menu item.
https://labhuset.no/I do not know what is going on there.
Hi,
Thanks for the link to your site, I have not seen a custom menu item with a “search icon” option before:
the reason it only shows until the slider shows is because it is hidden by “display:none opacity:0” once the slider shows, this could be a “lazy load” conflict, I see that you are using JetPack & possibility so other plugins that could cause this, although I don’t know what the default behavior for FiboSearch is.
Try disabling your other plugins to ensure there is not a conflict, then check the FiboSearch options, if this doesn’t help try using the FiboSearch shortcode instead of the custom element.Best regards,
MikeThank you for your help Mike! I sent a message to FiboSearch and was told the following.
– Make sure that Enfold Theme Options -> Main Menu -> Append Search Icon To Main Menu (is toggled off).
– FidoSearch bar is added through Appearance -> Menus. To the location it is to be in.
(Menu item options be sure to have Layout: Search bar selected.)– WooCommerce -> FiboSearch -> Starting tab. Make sure that Search bars Replace them is not checked. As this is not meant to replace the Enfold search, but to replace it.
– WooCommerce -> FiboSearch -> Search bar. I clicked to use the Show submit button. I also used the style Solaris. Use layout Search bar.
FiboSearch support gave me the following CSS. I added some additional code.
/* Fra Fibiosearch support 9 nov 2023. */ /* Overriding default Enfold code. */ .menu-item .dgwt-wcas-search-wrapp { opacity: 1 !important; display: block !important; } .dgwt-wcas-search-input { margin-bottom: 0 !important; } .menu-item .dgwt-wcas-search-form { margin-bottom: 0 !important; } /* Search field. */ #menu-item-3327 { height: 90px; display: flex; align-items: center; } /* Search field. 6 nov Joachim. */ #top .header_color .input-text, #top .header_color input[type='text'], #top .header_color input[type='input'], #top .header_color input[type='password'], #top .header_color input[type='email'], #top .header_color input[type='number'], #top .header_color input[type='url'], #top .header_color input[type='tel'], #top .header_color input[type='search'], #top .header_color textarea, #top .header_color select { border: 1px solid lightgrey; background: white; } /* Search button. 6 Nov Joachim. */ .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit, .dgwt-wcas-om-bar .dgwt-wcas-om-return { background-color: #f7f7f7; color: #0f0f0f; border-top: 1px solid lightgrey; border-right: 1px solid lightgrey; border-bottom: 1px solid lightgrey; }I added so much detail so that others whom might come across this thread might also want to try out FiboSearch.
The result is seen here: https://labhuset.no/The site is slow to show results so that is something I will need to look into.
Hi,
Thank you for sharing the solution for others to try, glad to see that you have sorted this out, shall we close this thread then?
As for the slow results, I see that a “gear” shows while the results are generating, and I don’t see any errors in the console, so I think the FiboSearch is getting the results live and has not cached the results, perhaps this is an option in the plugin, or perhaps there is another step you need to do, try asking the FiboSearch support.Best regards,
MikeHey Mike
I added a gear icon to show the user that something is going on. As it seems one needs to wait a little before results show up.
I mentioned the slowness of the search area for FidoSearch support so I will see what they say. It might be something I can share here. So let’s wait a few days with closing the thread.
- You must be logged in to reply to this topic.