coffee4dev

This simple plugin turn search form of Woocommerce work with ajax.
The search result is display by Ajax.
You can use this shortcode to call search form in widget text
[c4d-woo-ajax-search-form]
or use in php code like this
To use full features, please install and active C4D Plugin Manager and Redux Framework
<blockquote class="wp-embedded-content" data-secret="vBNvWazhwk"><a href="https://wordpress.org/plugins/c4d-plugin-manager/" rel="ugc">C4D Plugin Manager</a></blockquote>
<iframe loading="lazy" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="“C4D Plugin Manager” — Plugin Directory" src="https://wordpress.org/plugins/c4d-plugin-manager/embed/#?secret=hhkcrOqI9f#?secret=vBNvWazhwk" data-secret="vBNvWazhwk" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<blockquote class="wp-embedded-content" data-secret="D9wgbHV2ZL"><a href="https://wordpress.org/plugins/redux-framework/" rel="ugc">Redux Framework</a></blockquote>
<iframe loading="lazy" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="“Redux Framework” — Plugin Directory" src="https://wordpress.org/plugins/redux-framework/embed/#?secret=CAoufAHBF5#?secret=D9wgbHV2ZL" data-secret="D9wgbHV2ZL" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
This plugin is used in C4D Vision – Responsive WooCommerce Theme
You can view here http://coffee4dev.com/responsive-woocommerce-theme-c4d-vision/

Woocommerce Ajax Search

This simple plugin turn search form of Woocommerce work with ajax.

shazdeh

The shortcode requires the widget ID, but no need to guess, the plugin generates the code for you. To override the widget title for a widget you can use the “title” parameter: 
 [widget id=”text-1″ title=”New title”] 
You can also hide the widget title entirely if desired: 
 [widget id=”text-1″ title=”0″]
Additional Parameters:
<ul>
<li>container_tag: the HTML tag to use for the widget container, default: <code>div</code></li>
<li>container_class: CSS classname added to the widget container, default: <code>widget %2$s</code> (Note: uses sprintf for variable substitution)</li>
<li>container_id: HTML ID attribute for the widget container, default: <code>%1$s</code> (Note: uses sprintf for variable substitution)</li>
<li>title_tag: HTML tag to use for the widget title wrapper, default: <code>h2</code></li>
<li>title_class: CSS classname for the widget title wrapper, default: <code>widgettitle</code></li>
</ul>

Widget Shortcode

I had tried another plugin to use a widget in the gutenberg block editor on a page, however that plugin had some issues so was not ideal.

Widget shortcode enabled me to add my widget by copying the generated shortcode to the shortcode block in the block editor, resulting in the widget being displayed perfectly on the page. 

Works perfectly with the block editor

Adds [widget] shortcode which enables you to output widgets anywhere you like.

Woocommerce Ajax Search vs Widget Shortcode