Add Filters and Hooks to Search Form Widget

[deckerweb]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor Pro.

My Feature Request

Make Elementor Pro Search Form Widget customizeable via Filters and Hooks (aka more developer friendly)
I need the Elementor search form widget to be more customizeable - preferable via Filters and Hooks. This also will open possibilities for plugin and theme developers.

My Suggestions

• Filter the main input field to add additional code (classes, ids, data-fields for JS triggerering)
• Filter the whole input field and/or the form tag to optionally replace or customize the full markup
• Add Action hook after opening the <form> tag, plus, Add Action hook before closing </form> tag --> both will allow to add additional markup like hidden input fields etc.
• to the visible controls in the Widget: add post type support via input field or Select2 multiple select --> goal: list of post types to be searched in

Considered Alternatives
As of my knowledge there is no native Elementor widget yet which would allow the above mentioned features.

I considered this plugin: https://wordpress.org/plugins/searchwp-live-ajax-search/
However, it cannot be added to Elementor yet as I cannot customize the search form/ input field etc.
There needs to be added this part to the input field markup: data-swplive="true"

Other "live search" plugins may work via a regular WordPress widget or a shortcode BUT most of them are non-working, bloated AND slowing the site down - or all of that combined.... :-(

Another alternative would be to enhance the existing Elementor search widget with lot more capabilities and customizing options also for developers. But the above made suggestions then would still apply in my opinion.

Additional context
(currently none)

[bkjproductions]

Can I add a request to this?

Generally speaking, I would like to just have the ability to set an ACTION for the form. Seems like that would be easy enough to do; I don't necessarily want to mess around with hooks and such, and it would be just so much simpler if I could set the action to be my desired URL.

I get that it would be useful to have hooks and such (and I think there is one) but in my situation I don't want to deal with Ajax.

So, let me choose the METHOD and ACTION as one of the settings of the form.

Thanks!

[tekpriest]

I hope I can add this request here

In the basic form search, instead of using the default search form, I used dropdowns from the form field as search options but they don't work, the explore page still displays all the listings

http://kyrep.000webhostapp.com

[jazir555]

Can't support this enough. Search is major functionality, I would heavily appreciate this being worked on. If anyone has an adequate solution in the mean time, such as a plugin that has decent search functionality, fast and elementor compatible that would be great. I've tried and failed to implement external search plugins into elementor, so any assistance is greatly appreciated.

[jcmatoskx]

So as of now there is no way of achieving this? I'm essentially trying to make the Elementor Search box use it only for Products/WooCommerce since its an ecommerce website, and it doesnt make sense for the search platform to search for anything else. I built the header with Elementor, and it's inconsistent that the search box there returns different results with a different visual organization than the Woocommerce search bars

I was told to:

This is common in some custom templates. To fix this, just add this code inside the form that contains the input box :

<input type="hidden" id="search-param" name="post_type" value="product">

The final form should look something like this:

<form class="elementor-search-form" role="search" action="https://website.com" method="get">
<input type="hidden" id="search-param" name="post_type" value="product">
<div class="elementor-search-form__container">
<input placeholder="Search for product..." class="elementor-search-form__input" type="search" name="s" title="Search" value="">
<button class="elementor-search-form__submit" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="elementor-screen-only">Procurar</span>
</button>
</div>
</form>

But I assume there is no way to actually do this right now

[devj3ns]

So as of now there is no way of achieving this? I'm essentially trying to make the Elementor Search box use it only for Products/WooCommerce since its an ecommerce website, and it doesnt make sense for the search platform to search for anything else. I built the header with Elementor, and it's inconsistent that the search box there returns different results with a different visual organization than the Woocommerce search bars

I was told to:

This is common in some custom templates. To fix this, just add this code inside the form that contains the input box :

<input type="hidden" id="search-param" name="post_type" value="product">

The final form should look something like this:

<form class="elementor-search-form" role="search" action="https://website.com" method="get">
<input type="hidden" id="search-param" name="post_type" value="product">
<div class="elementor-search-form__container">
<input placeholder="Search for product..." class="elementor-search-form__input" type="search" name="s" title="Search" value="">
<button class="elementor-search-form__submit" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="elementor-screen-only">Procurar</span>
</button>
</div>
</form>

But I assume there is no way to actually do this right now

What I have done is just basically copied your Code inside a Popup with an HTML Widget. Then I have created a search icon and linked it with the Popup.

Now I have nearly the same effect as when I use the search widget (Fullscreen), but as product search!
Very nice, thanks for the code!

[Ronsku]

Yes, Everything else is so perfect. Custom Post Types, Custom Fields, easily create these ACF templates and listings, but NO filtering what so ever. I've also tried https://crocoblock.com/jetsmartfilters/, but it requires you to setup the whole system (post types and custom fields) through their JetEngine plugin and it makes it bugs a lot and makes it slow. Elementor doesn't bug, it works so well, same with CPT UI and ACF, so I wouldn't like to mix the Jet plugin into the mess just to get a simple filtering for my posts.

Such a critical component, can't be too hard to create I would imagine.

Please implement this and you are golden!

[madbradj]

This should also be high up on Elementors list (along with custom skins for posts). Filtering should be built into posts as well as woocommerce products.

[RichardUUU]

Are you guys reading what J3nsis wrote? The code posted works.

[touchestudio]

Are you guys reading what J3nsis wrote? The code posted works.

Where do we paste this code?

[RichardUUU]

In my archive template for a CPT called Reviews, I used elementor to insert an HTML block and inserted the code below. It's slightly different than the original but more to my liking.

Cheers, Richard

<form class="elementor-search-form" role="search" action="https://endinghate.com" method="get">
  <input type="hidden" id="search-param" name="post_type" value="reviews">
  <div class="elementor-search-form__container">
    <div class="elementor-search-form__icon"> 
	  <i class="fa fa-search" style="padding: 15px;" aria-hidden="true"></i> 
      <span class="elementor-screen-only">Search</span>
    </div> 
	<input placeholder="Search..." class="elementor-search-form__input" type="search" name="s" title="Search" value="">
  </div>
</form>

[RogersSteffan]

The ability to exclude pages like the cart page and my account page would be a massive improvement for this element

[shilo-ey]

This issue has been resolved in Elementor Pro v2.7

Feel free to update

Thanks!

[pako69]

Hi

where are the documentation and how to use:

elementor_pro/search_form/after_input and elementor_pro/search_form/before_input actions hooks?

I also need to add data-swplive="true" to the input field markup.

Thanks

[yratof]

@pako69 If you need to force Elementor's search to only use a specific post type, lets say product for woocommerce, you can put this into a mu-plugin to test it out

<?php
/* Elementor Pro Search forced products only */
add_action( 'elementor_pro/search_form/after_input', function( $form ) {
    echo '<input type="hidden" name="post_type" value="product" />';
}, 10, 1 );

But if you wanted to add your extra data attribute, you might have to add a second imput that mimics the input, then use css to hide the previous one.

<?php
/* Elementor Pro Search add additional attributes to input. hide previous input with css */
add_action( 'elementor_pro/search_form/before_input', function( $form ) {
	echo '<input data-swplive="true"' . $form->get_render_attribute_string( 'input' ) . '>';
}, 10, 1 );

[pako69]

Hi @yratof

I waited a month to get an answer, but it was worth it! ;-)

It works and here my PHP/CSS code for other people:

PHP:

add_action( 'elementor_pro/search_form/before_input', function( $form ) {
echo '<div class="elementor-search-form__container">';
echo '<div class="elementor-search-form__icon">';
echo '<i class="fa fa-search" style="xpadding: 15px;" aria-hidden="true"></i>';
echo '<span class="elementor-screen-only">Search</span>';
echo '</div>';
echo '<input data-swplive="true"' . $form->get_render_attribute_string( 'input' ) . '>';
echo '</div>';
}, 10, 1 );

CSS:

.elementor-search-form__container:last-child {
  display:none !important;
}

Thank you so much!

[Nathaniel-Fernandes]

Hi @yratof

I waited a month to get an answer, but it was worth it! ;-)
It works and here my PHP/CSS code for other people:

The search form shows up well as does the AJAX live search results.

HOWEVER, the input is not submitting when I hit the enter button.

Do you know why? I'm probably missing something simple but I don't know.

[Nathaniel-Fernandes]

Found a solution with add_render_attribute()!

Add to functions.php:

add_action( 'elementor_pro/search_form/before_input', function( $form ) {
    $form->add_render_attribute(
		'input',
		[
			'data-swplive' => "true"
		]
    );
}, 10, 1 );

Relevant link: https://developers.elementor.com/add-html-attribute/.

This modifies the original template so the form input itself has a data attribute so there's no need for any CSS.

My best guess at the above problem (search form not submitting when hit enter) was that Wordpress was confused by 2 search forms.

[carroTsai]

@pako69 If you need to force Elementor's search to only use a specific post type, lets say product for woocommerce, you can put this into a mu-plugin to test it out

<?php
/* Elementor Pro Search forced products only */
add_action( 'elementor_pro/search_form/after_input', function( $form ) {
    echo '<input type="hidden" name="post_type" value="product" />';
}, 10, 1 );

But if you wanted to add your extra data attribute, you might have to add a second imput that mimics the input, then use css to hide the previous one.

<?php
/* Elementor Pro Search add additional attributes to input. hide previous input with css */
add_action( 'elementor_pro/search_form/before_input', function( $form ) {
	echo '<input data-swplive="true"' . $form->get_render_attribute_string( 'input' ) . '>';
}, 10, 1 );

Thanks for the code, it works perfectly!

[tquoctuan97]

Found a solution with add_render_attribute()!

Add to functions.php:

add_action( 'elementor_pro/search_form/before_input', function( $form ) {
    $form->add_render_attribute(
		'input',
		[
			'data-swplive' => "true"
		]
    );
}, 10, 1 );

Relevant link: https://developers.elementor.com/add-html-attribute/.

This modifies the original template so the form input itself has a data attribute so there's no need for any CSS.

My best guess at the above problem (search form not submitting when hit enter) was that Wordpress was confused by 2 search forms.

Thank you for the code.
Easy to add attribute 'autocomplete' => "off"

[wordpresscodenet]

how can I change the results page? i mean when I search on elementor search form it takes me to https://domain.com/?s=searchterm

I would like to get results as https://domain.com/search-results/?ad_title=searchterm

please can you share the code add to my functions.php ?