<?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