Custom Elementor Search Product

PHOTO EMBED

Thu Jul 18 2024 07:36:53 GMT+0000 (Coordinated Universal Time)

Saved by @quanganh141220 #php #single #product 

<?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());
content_copyCOPY

Hover Icon Search Display the search bar for search product woocommerce