Have you been looking around for some stylish search options that look great and interactive on your website? Many of you even wrote to us asking whether we plan to introduce styles to replace the default Astra search box.
But now, we do! Yes, you can add a stylish search option that such as
- The Slide search – It slides open a search box when you click on the search icon.
- The Full-screen search – It covers the entire screen
- The Header cover search – It covers the header
- The Search box – A default search box if you would like to keep it as it is.
With the newly introduced styles, you’ll be able to change the default search box on both desktop and mobile. These styling options are available in the Astra Theme version 1.4.9 and Astra Pro addon version 1.5.0.
You can take a quick look at the GIF below that shows how different search styles will look on your website.
What’s More to This?
Need to add search options anywhere on the page? We’ve introduced a few shortcodes that you can pick and insert anywhere on the page. These shortcodes work with specific parameters that allow you to select the style you wish to use. You can learn more about these search shortcodes in our knowledge base article.
Give It a Try!
To get started, backup your website and update your theme and Astra Pro. If needed, you can also follow the steps below to do it manually:
- Download the the latest versions of the theme and plugin from the member’s area.
- Delete the currently installed Astra theme and Astra Pro Addon plugin from your site. Don’t worry you won’t lose any data.
- Install the downloaded zip files in step 1, just like any WordPress theme and plugin.
That’s about it! If there are any improvements or features you would like to see, please feel absolutely free to let us know. We look forward to seeing your favorite search styles on your website!
Cheers 🙂
Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!
Thanks for the great articles. I’m using your search style and add it up on my website through shortcode where I could have more flexibility in placing my search box. Again thanks for the full screen style. really great job!
Hi guys is this search function integrated with https://woocommerce.com/products/woocommerce-product-search/
Would be fab it is 🙂
Regards.
Miles
This appears to be a wordpress site search. I would to see a woocommerce product search, because although it LOOKS REALLY NICE the results would confuse my customers.
How to add the search function together with the cart icon?
This is not available as of now, I the future versions of the plugin we will be bringing this option for the header layouts.
its can add buy html code in header
[astra_search]
[astra_woo_mini_cart]
Hi, I have a question. If I have team members on the website, is it possible to have the search function, search only through the list of team members?
You will have to look for third-party plugins to do this, This is not a part of the Astra theme options.
How do you style the search icon ?
Hi
1. How can I change the text string “Search…” without using a plugin?
2. How to limit the search result to post only?
Thank you.
Hi,
Custom code is available for this.
1. Change Placeholder for Search Box
2. Restrict Search Results for Posts Only
I also would like to know how I can change the text string ‘Search Results for:’.
Hi,
You can use custom code to alter the default string. Here is an article that will help.
Thanks so much for this!
I am using the “Slide Search” style on a website.
Question: What is the best way to increase the width of the search box when it slides out?
I would love to get the box so slide out to about 500px 700px or so.
About the last 15 sites we have done have all been Astra!
Thanks! — Steven
Hello Steven,
You can do this by adding a custom width to the form element and making changes for the dropdown CSS.
Please feel free to get in touch with us if you need any further help.
Dear Support Team,
is it possible to change the action URL from the search form via a filter/action?
Thanks in advance!
Christian
Hello Christian,
Well, we use the default WordPress filter to fetch the Search Form. You will need to check the WP codebase or other plugins that can help achieve this requirement.
Hi Support Team,
thanks for your reply. I should have mentioned that I mean the advanced search (full screen) from the Astra Pro version. But I figured it out. In case someone searches for a solution:
Copy template file from Astra Pro plugin directory:
/wp-content/plugins/astra-addon/addons/advanced-search/template/full-screen.php
to your child theme directory:
/wp-content/themes/your-astra-child-theme/astra-addon/advanced-search/full-screen.php
Now you can edit the template in a save way. Should work with any other template file from Astra Pro as well.
Best regards,
Christian
Hi Christian,
I seems it doesn’t work anymore…
I want to replace the in full-screen.php and override template in not display.
Best regards,
Clement
Hey
You said that search for mobile will be available soon.
Pls make it true. I realyy need that search on mobile.
Andrei
Hello, for the full page search, is it possible to add our logo here?
Hello Andrew,
Sorry, not as of now!
Hi,
How do we change (color) settings for the (search) results page.
Search on my website returns invisible links (seems like white on white bg). However the description lines (excerpts) are visible.
The links can be known to exist above the excerpts only on a mouse hover, otherwise its blank white spaces in between excerpts.
Thanks,
Saurabh.
P.S – Is there a place to suggest additional functionalities for Astra Pro. For eg: having a hamburger menu option for desktop. Astra is fab but there is always more to add/suggest.
Thanks!
Saurabh.
After searching and searching online for instructions on how to add search to the Astra Pro plugin Header Builder, I stumbled across how to add it. I’m having no luck in finding a setting that will allow the search box to slide to the right. Does anyone know where this setting is?
Thanks
Hi. I am using Astra Pro Version 3.5.1 but I can’t find the option to add “Search bar” as a last item in primary menu!
Hello Tung, after Astra 3.0 update which introduced the Header Footer Builder, the Search Styles were moved to the Search Element. Hope that helps. 🙂
Is it possible to make differentiation on Search Style?
I mean, I would like to use the search box style on Desktop, but I use the slide search style on mobile.
Hi
Is possible customise the layout to “No search results” with Elementor?
Sure, if you are using the Elementor Pro to create custom pages for Search page.
Already create for the “Search Results” archive, but when not found results is used another layout from Astra
Any idea how to force the Elementor layout?
Hello,
I have a problem in my search bar.
How to add a search bar for a page like freepik[dot]com/, elements.envato[dot]com/ search bar with categories, I using Astra theme for my website, but I can’t create like that kind of search bar. Please help to solve it as soon as possible.
Thank you.
Hello Helani, sorry at this moment we do not have such search functionality. Such requirements are added using a third-party plugin or custom code.