Elementor
Know about a plugin special search form module for Elementor page builder and learn more about other built-in integration features.
Know about a plugin special search form module for Elementor page builder and learn more about other built-in integration features.
Elementor is an advanced frontend drag & drop page builder. It helps to build beautiful website pages without coding skills at record speeds.
Advanced Woo Search ( AWS ) has a special search form module built specially for Elementor page builder. With this module it is possible to place plugin search form at any place on your site when building the pages via Elementor frontend builder.
Just find Advanced Woo Search element from the list of available elements and drag & drop it to any section of your page. It can be found inside WooCommerce section.
Search form element for Elementor plugin
Once a search form element is added to the page Elementor will show this form preview. It is possible to add on one page any number of such search forms.
Adding search form via Elementor page builder
Also the search form element has some content options:
Placeholder - Option to set text that will be visible for empty search form and
Form ID - PRO plugin version only. Gives option to specify search form ID that must be displayed. Use it if you have several search form instances.
Search form content options
Another way to add AWS search forms to the site via Elementor - using standard Elementor Search Form element and then enable Seamless Integration option from the plugin settings page. This option will replace all standard search forms with the plugin ones. Use this option if you just need to replace all search forms at once.
Standard Elementor search form element
Seamless integration option
Another cool feature of the Elementor page builder - option to customize search results page. AWS plugin will use this new page layout for showing its WooCommerce products search results.
1. Create a new blank theme template. Navigate to Templates -> Theme Builder page. Click Add new. Inside appearing pop-up choose Product Archive as template type and specify this new template name.
New theme template creation via Elementor
2. Add 'Products' element. Now you have the option to choose some predefined layout for this template from the Elementor block library or build it from scratch. Let's choose the second option. Close Library pop-up to start building search page templates.
From the list of available elements find Products under the WooCommerce category and drag & drop it to the page.
Products element
Products element for Elementor search results template
3. Set 'Products' element options. Find and set Products element Query option to Current Query. You can also change some options from the Content tab line number of products per row and total columns number.
Products element options
4. Publish the template. Product element is required for the search results template. Other ones are not necessary but you can add some additional ones if needed.
After all is done just click Publish button. You will see Publish settings pop-up. Set rule to Include: Search results to limit this new template for the products search results.
Elementor template display rules
5. Finish! Now all is set. Just check your new search results template by searching something via plugin search form and hit enter key of view all button.
Plugin search form with test query
New template for product search results
Q: I create two pages via Elementor theme builder: search results page and shop page. And the plugin uses a shop page as template instead of search results page. How to solve this?
It is a known issue with Elementor theme builder. If you create two Products Archive page types with two different conditions: one for Shop Page and one for Search Results then the plugin will use the shop page as a search results template.
Templates created via Elementor theme buider
To solve this issue you can modify the condition for your Shop page template and add Exclude: Search Results rule.
New display rule for the shop page