Woocommerce custom product search box

By October 26, 2016Tutorial, woocommerce
woocommerce-custom-product-search

The product search box widget loads the search box using the template function:
get_product_search_form() It then looks for the product search form in the file ‘product-searchform.php’ or uses its default markup. You can override the default WooCommerce template product-searchform.php by customizing the markup.

For reference, the default markup is:


<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/'  ) ); ?>">
  <label class="screen-reader-text" for="s"><?php _e( 'Search for:', 'woocommerce' ); ?></label>
  <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?>" />
  <input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" />
  <input type="hidden" name="post_type" value="product" />
</form>

 

Custom form search with brands


<form role="search" method="get" class="woocommerce-product-search" id="woocommerce-product-search" action="<?php echo esc_url( home_url( '/product/'  ) ); ?>">
        
        <label class="screen-reader-text" for="s"><?php _e( 'Search for:', 'woocommerce' ); ?></label>
        
        <input type="text" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?>" />
        
        <select name="product_brand" class="selectpicker" data-header="<?php echo $lable_brand;?>">
            <option  disabled selected value=""><?php echo $lable_brand;?>:</option>
            <?php
            foreach($brands as $brand) {
              echo '<option value="'.$brand->slug.'">'.$brand->name.'</option>';  
            }
            ?>
        </select>
          
        <select name="min_price" class="selectpicker" data-header="<?php echo $lable_price;?>">
            <option  disabled selected value=""><?php echo $lable_price;?>:</option>
            <?php
            foreach($price_array as $price) {
        $price_lable = convertVND($price);
              echo '<option value="'.$price.'">'.$price_lable.'</option>';  
            }
            ?>
        </select>
        
    </form>

 

 

woocommerce-custom-product-search

Bang Andre
Vietnam web design company

Leave a Reply

Captcha * Time limit is exhausted. Please reload CAPTCHA.