<?php
class Product_Search_Widget extends \Elementor\Widget_Base
{
public function get_name()
{
return 'product-search-widget';
}
public function get_title()
{
return __('Product Search Widget', 'text-domain');
}
public function get_icon()
{
return 'eicon-search';
}
public function get_categories()
{
return ['general'];
}
protected function render()
{
?>
<form class="pp-search-form" role="search" action="<?php echo esc_url(home_url('/')); ?>" method="get" aria-label="Search form">
<div class="pp-search-form__toggle">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="pp-search-form__container pp-search-form--lightbox">
<div class="search-form">
<label class="pp-screen-reader-text" for="pp-search-form__input-<?php echo esc_attr($this->get_id()); ?>">
Search our products
</label>
<input id="pp-search-form__input-<?php echo esc_attr($this->get_id()); ?>" class="pp-search-form__input" type="search" name="s" title="Search" value="">
</div>
<button type="submit" class="pp-search-form__button">
<span class="pp-icon-search" aria-hidden="true">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</button>
<input type="hidden" name="post_type" value="product">
<div class="pp-search-form--lightbox-close">
<span class="pp-icon-close" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
</span>
</div>
</div>
</form>
<?php
}
}
\Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Product_Search_Widget());
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter