-
Posts
-
Hi,
I added a products search bar widget in my footer and I would like to know how to change the background color and the font color of this search bar.
Could you please help me on this point?I also have another issue about this search bar: when I do a research with this widget, the results are displayed like on a shop page and this is what I want. But when I do a research with the search tool in my main menu, results are displayed as a list, and I don’t want that.
How could I make the search tool in my main menu have the same behavior than my widget?If needed, you can find a link and credentials to my website in private content.
Thanks a lot!
I looked for some solution on my side and I found the css
.woocommerce-product-search input {}
which helped me to do some of the changes I wanted.
But I would like to customize the woocommerce search bar like the Enfold search bar (a unique bar with the magnifying glass on the right and no search button)… How could I do that?
For my second question I’m still looking for a solution… If you could help me please…
Thanks a lot!!Hi fcp,
Could you please attach some screenshots of the issue?
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaHi Victoria,
As you can see on this screenshot (https://imgur.com/4EjC4Wo) or on my website, I temporarily added two search widgets in the third column of my footer:
– The first one is a woocommerce products search widget a little bit customized using css
– The second one is a classic Enfold search widgetSo, to be clear, I would like to do two different things:
1) In my footer, I would like to keep the woocommerce search widget, but with exactly the same design than the Enfold search widget (I don’t know what is the easier way between adding some css to a woocommerce search widget, or changing action of an Enfold search widget using some php…)
2) For the second thing (in the header), I only want to keep exactly the same design, with the magnifying glass icon on the right of my main menu, but I want this icon to use woocommerce products search and not Enfold search.What do I need to do to achieve these two things?
Thanks a lot! :-)
Hi,
Sorry for the delay.
1.) You can apply these css properties to the plugin’s search field.
.<a href='https://refer.wordpress.com/r/84/woocommerce/' target='_blank' rel="nofollow">woocommerce</a>-search { -webkit-appearance: none; border: 1px solid #e1e1e1; padding: 8px 6px; outline: none; font: 1em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif; color: #777; margin: 0; width: 100%; display: block; margin-bottom: 20px; background: #fff; background-color: rgb(255, 255, 255); border-radius: 0px; }Just replace the selector woocommerce-search with the appropriate one.
2.) Unfortunately, this is going to require modifications that are beyond the scope of support, so we won’t be able to help you with it. Please hire a freelance developer or contact our partner, Codeable.
Best regards,
IsmaelHi Ismael,
Thanks a lot for your answer :-)
I added your code, but nothing really changed. I also tried to add #top before this code or add !important everywhere, but nothing…
This is how it looks like: https://imgur.com/sJk9P75
Last days I also noticed something. When I create a widget area on a page and then I add an Enfold search bar in it, it is one more different design: https://imgur.com/pgkqpY9. I don’t understand why… Anyway, this design is exactly the one I would like to achieve for my WooCommerce search bar.
Thanks a lot for your help!Hi Ismael,
I’m finally really close to achieve what I needed to.
It only needs some tiny adjustments:
1) (see screenshot in private content)
For main menu search results, I already added some CSS to hide products excerpts:
.header_color .ajax_search_excerpt {display: none;}
How could I replace them by products prices?
Also, I would like to align products titles and prices to the left.2) (see screenshot in private content)
Which function do I need to add to modify the text for search with no results?3) (see screenshot in private content)
When clicking on the magnifying glass icon in the main menu, the search dropdown is opened but the selector is on the icon and not in the placeholder. I already added some code to hide the outline around the icon, but which code do I need to add to make the cursor to be in the placeholder and in this way, don’t need to click in the placeholder before typing search text?Thanks a lot!
Hi,
1.) You will have to modify the avia_ajax_search function in the functions-enfold.php file in order to add the product price in the search results.
2.) You can change the text by editing the search.php file or template.
If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.
Thanks!
Best regards,
Ismael
- You must be logged in to reply to this topic.