Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WooCommerce Product Search Filter Markup
<?php
add_filter( 'get_product_search_form' , 'me_custom_product_searchform' );
/**
* Filter WooCommerce Search Field
*
*/
function me_custom_product_searchform( $form ) {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . '">
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
<button type="submit" id="searchsubmit" />
<span class="icon"><i class="fa fa-search"></i></span>
</button>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'Search products...', 'woocommerce' ) . '" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>';
return $form;
}
<?php
add_filter( 'get_product_search_form' , 'me_custom_product_searchform' );
/**
* Filter WooCommerce Search Field
*
*/
function me_custom_product_searchform( $form ) {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . '">
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'My Search form', 'woocommerce' ) . '" />
<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>';
return $form;
}
/* Woo Search */
.widget_product_search {
overflow: auto;
}
.widget_product_search input[type="search"],
.widget_product_search input[type="submit"] {
border-radius: 0;
padding: 6px;
}
.widget_product_search input[type="search"] {
width: 200px;
float: left;
padding: 5px;
}
.widget_product_search form[role="search"] {
float: left;
}
.widget_product_search input[type="submit"] {
float: left;
font-size: 1em;
}
.widget_product_search input[type="submit"]:hover,
.widget_product_search input[type="submit"]:focus {
background: #57ad68;
border: #fff 1px solid;
color: #000;
}
/* Woo Search */
.widget_product_search {
overflow: auto;
}
.widget_product_search #searchform {
float: left;
}
.widget_product_search input[type="text"],
.widget_product_search button[type="submit"] {
border-radius: 0;
padding: 6px;
}
.widget_product_search input[type="text"] {
width: 200px;
float: right;
padding: 6px;
}
.widget_product_search button[type="submit"] {
float: right;
}
.widget_product_search button[type="submit"]:hover,
.widget_product_search button[type="submit"]:focus {
background: #f9ba00;
border: #fff 1px solid;
color: #000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.