Reading list Switch to dark mode

    How to Add WooCommerce Custom Product Filter on Shop Page?

    Updated 29 May 2023

    WooCommerce is a powerful e-commerce platform that allows users to create and customize their online stores. One of the key features of WooCommerce is its ability to filter products based on various criteria. However, the default filters may not always meet the needs of every store owner.

    In this blog post, we will walk through the steps required to add a custom product filter to the WooCommerce shop page.

    Step 1: Create a Custom Plugin

    The first step is to create a custom WooCommerce plugin to house the custom product filter code. You can create a new folder in the “wp-content/plugins/” directory and give it a unique name. Inside this folder, create a new PHP file and give it the same name as the folder. This file will serve as the main plugin file.

    Step 2: Add the Code for the Custom Product Filter

    The next step is to add the code for the custom product filter in WooCommerce. In this example, we will create a filter that allows users to filter products by color. Add the following code to the main plugin file:

    Plugin Name: Custom Product Filter
    Description: Adds a custom product filter to the WooCommerce shop page
    Version: 1.0
    Author: Webkul
    add_action( 'woocommerce_before_shop_loop', 'wk_custom_product_filter' );
    function wk_custom_product_filter() {
        global $wp_query;
        $product_colors = get_terms( array(
            'taxonomy' => 'pa_color',
            'hide_empty' => false,
        ) );
        <form method="get">
            <select name="product_color">
                <option value="">Filter by Color</option>
                <?php foreach( $product_colors as $color ) : ?>
                    <option value="<?php echo esc_attr( $color->slug ); ?>"><?php echo esc_html( $color->name ); ?></option>
                <?php endforeach; ?>
            <input type="hidden" name="post_type" value="product" />
            <input type="submit" value="Filter" />
    add_filter( 'pre_get_posts', 'wk_custom_product_filter_query' );
    function wk_custom_product_filter_query( $query ) {
        if( ! is_admin() && $query->is_main_query() && is_shop() && isset( $_GET['product_color'] ) && ! empty( $_GET['product_color'] ) ) {
            $tax_query = array(
                    'taxonomy' => 'pa_color',
                    'field' => 'slug',
                    'terms' => $_GET['product_color'],
            $query->set( 'tax_query', $tax_query );
        return $query;

    Step 3: Save and Activate the Plugin

    Once you have added the code to the main plugin file, save the file and activate the plugin in the WordPress admin panel. To activate the plugin, go to the “Plugins” menu and find the plugin you just created. Click “Activate” to activate the plugin.

    Searching for an experienced
    Woocommerce Company ?
    Find out More

    Step 4: Test the Custom Product Filter

    After activating the plugin, go to the shop page and test the custom product filter. You should see a new dropdown menu that allows users to filter products by color. When a user selects a color, the page will reload and display only products that match the selected color.

    woocommerce product filter shop page


    Adding a custom product filter to the WooCommerce shop page is a simple and effective way to improve the user experience of your online store. With the sample code provided above, you can easily create a custom product filter based on any criteria you choose.

    By following the steps outlined in this blog post, you can add a custom product filter to your WooCommerce shop page in just a few minutes.


    Still, have any issues feel free to add a ticket and let us know your views to make the code better also you can contact us at [email protected].

    Thanks for Your Time! Have a Good Day!

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home