One useful functionality in WooCommerce is the ability to add product search filters to enhance the user experience and make it easier for customers to find the products they are looking for. By implementing search filters, you can allow users to narrow down their search results based on specific criteria such as price range, product categories, attributes, or custom fields.
To achieve this functionality, you can use the woocommerce_product_query hook to modify the product query before it is executed. Within this hook, you can add custom filters to the query based on user input.
Here’s an example code snippet that demonstrates how to add a price range filter to the WooCommerce product search:
function wpsnippets_add_price_filter_to_product_search( $q ) {
if ( is_search() && ! is_admin() && $q->is_main_query() ) {
$min_price = isset( $_GET['min_price'] ) ? floatval( $_GET['min_price'] ) : '';
$max_price = isset( $_GET['max_price'] ) ? floatval( $_GET['max_price'] ) : '';
if ( $min_price && $max_price ) {
$meta_query = $q->get( 'meta_query' );
$meta_query[] = array(
'key' => '_price',
'value' => array( $min_price, $max_price ),
'type' => 'numeric',
'compare' => 'BETWEEN',
);
$q->set( 'meta_query', $meta_query );
}
}
}
add_action( 'woocommerce_product_query', 'wpsnippets_add_price_filter_to_product_search' );
In this code snippet, we first check if the current query is a search query and not in the admin area. Then, we retrieve the minimum and maximum price values from the $_GET superglobal array, which contains the values passed through the URL parameters.
If both minimum and maximum prices are provided, we modify the product query by adding a meta_query parameter. This meta_query restricts the search results to products with prices between the specified range.
You can further customize this code snippet by adding additional filters based on other criteria such as product categories, attributes, or custom fields. Just modify the meta_query array accordingly.
Remember to prefix your custom functions with wpsnippets_ to follow the WordPress coding standards.
Examples
Example #1: Adding a Custom Product Filter by Category
This example demonstrates how to add a custom product filter by category in WooCommerce. The code snippet adds a dropdown filter to the product search form, allowing users to filter products by category.
function wpsnippets_add_product_category_filter() {
$args = array(
'taxonomy' => 'product_cat',
'name' => 'product_cat',
'show_option_all' => 'All Categories',
'hide_empty' => 1,
'orderby' => 'name',
'selected' => isset( $_GET['product_cat'] ) ? $_GET['product_cat'] : '',
'hierarchical' => 1,
'depth' => 3,
'show_count' => 0,
'hide_if_empty' => true,
'value_field' => 'slug',
);
wp_dropdown_categories( $args );
}
add_action( 'woocommerce_product_filters', 'wpsnippets_add_product_category_filter' );
The wpsnippets_add_product_category_filter function adds a dropdown filter to the WooCommerce product search form. It uses the wp_dropdown_categories function to generate the dropdown HTML markup. The selected category is determined based on the $_GET['product_cat'] value, allowing users to filter products by category.
Example #2: Adding a Custom Product Filter by Price Range
This example demonstrates how to add a custom product filter by price range in WooCommerce. The code snippet adds two input fields to the product search form, allowing users to filter products within a specific price range.
function wpsnippets_add_product_price_filter() {
?>
<form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="hidden" name="post_type" value="product" />
<input type="hidden" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" />
<input type="hidden" name="orderby" value="<?php echo esc_attr( isset( $_GET['orderby'] ) ? $_GET['orderby'] : '' ); ?>" />
<input type="hidden" name="order" value="<?php echo esc_attr( isset( $_GET['order'] ) ? $_GET['order'] : '' ); ?>" />
<label for="min_price">Min Price:</label>
<input type="number" name="min_price" id="min_price" value="<?php echo esc_attr( isset( $_GET['min_price'] ) ? $_GET['min_price'] : '' ); ?>" />
<label for="max_price">Max Price:</label>
<input type="number" name="max_price" id="max_price" value="<?php echo esc_attr( isset( $_GET['max_price'] ) ? $_GET['max_price'] : '' ); ?>" />
<button type="submit">Apply</button>
</form>
<?php
}
add_action( 'woocommerce_product_filters', 'wpsnippets_add_product_price_filter' );
The wpsnippets_add_product_price_filter function adds two input fields (min price and max price) to the WooCommerce product search form. The input values are used as query parameters in the search form’s action URL. Users can enter a minimum and maximum price to filter products within a specific price range.
Example #3: Adding a Custom Product Filter by Attribute
This example demonstrates how to add a custom product filter by attribute in WooCommerce. The code snippet adds a dropdown filter to the product search form, allowing users to filter products by attribute.
function wpsnippets_add_product_attribute_filter() {
$attribute = 'pa_color'; // Replace with your desired attribute slug
$terms = get_terms( $attribute, array( 'hide_empty' => false ) );
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) {
echo '<select name="' . esc_attr( $attribute ) . '">';
echo '<option value="">All ' . esc_html( $attribute ) . '</option>';
foreach ( $terms as $term ) {
echo '<option value="' . esc_attr( $term->slug ) . '">' . esc_html( $term->name ) . '</option>';
}
echo '</select>';
}
}
add_action( 'woocommerce_product_filters', 'wpsnippets_add_product_attribute_filter' );
The wpsnippets_add_product_attribute_filter function adds a dropdown filter to the WooCommerce product search form based on a specific attribute. It retrieves the terms of the attribute using the get_terms function and generates the dropdown HTML markup. Users can select an attribute value to filter products accordingly.