How to Add WooCommerce Custom Product Filter on Shop Page?

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:

<?php
/*
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; ?>
        </select>
        <input type="hidden" name="post_type" value="product" />
        <input type="submit" value="Filter" />
    </form>
    <?php
}

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(
            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.

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.

Conclusion

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.

Support

Still, have any issues feel free to add a ticket and let us know your views to make the code better https://webkul.uvdesk.com/en/customer/create-ticket/ also you can contact us at [email protected].

Thanks for Your Time! Have a Good Day!