How to Filter WooCommerce Products by Title

This method involves creating a custom Select Filter that targets product titles using a specific query variable. Let’s walk through the setup process step by step.

Create and configure the filter

To create a filter, proceed to WordPress Dashboard > Smart Filters > Add New. 

Enter the Filter Name and pick the Filter Type (we choose “Select” in this case, but it can be either “Radio” or “Checkboxes” filters). 

Select the “Posts” option in the Data Source field. The Placeholder field can be set up according to your needs; we leave its default setup.

Next, choose the “Products” option in the Post Type field. 

Then, in the Query Variable field, click the “Dynamic Tag” icon and select the “Plain Query Variable” option. In the newly appeared Variable Name field, insert the “p” value.

Place a filter on the page

Now, we can add the filter to the page. Our How to Apply Filters to WooCommerce Archive tutorial will help you with the setup. 

If you proceed to the WordPress Dashboard > Smart Filters > Settings > General Settings tab, you can see the JetSmartFilters plugin’s compatibility with other widgets listed.

In our case, we will apply the filter to the Products Grid widget. Please check the How to Apply Filters to the Products Grid Widget tutorial to ensure the filter is applied correctly.

When you are ready with the settings, click the “Publish” button.

Check how the select filter works on the front end

Now, open the page on the front end to see how the filter works. We can choose an option (“Cap”) from the select dropdown and see the needed product.

In case you need a Search Filter for titles, the adjustments will be different.

Add the custom code

First of all, the following snippet should be added:

<?php

class JSF_Search_By_Post_Tiltle {
    
    public $key = 'search__post_title';
    
    public function __construct() {
        add_filter( 'jet-smart-filters/query/final-query', array( $this, 'modify_query' ) );
    }
    
    public function modify_query( $query ) {
        
        if ( ! isset( $query['meta_query'] ) ) {
            return $query;
        }
        
        foreach ( $query['meta_query'] as $key => $item ) {
            if ( false !== strpos( $item['key'], $this->key ) ) {
                
                unset( $query['meta_query'][$key] );
                
                global $wpdb;
                
                //$item['value'] = str_replace( ' ', '%', $item['value'] );
                
                $sql = "SELECT ID FROM {$wpdb->posts} WHERE post_title LIKE '%{$item['value']}%'";
                $posts = array_column( $wpdb->get_results( $sql, 'ARRAY_A' ), 'ID' );
                
                if ( ! empty( $posts ) && isset( $query['post__in'] ) ) {
                    $query['post__in'] = array_intersect( $posts, $query['post__in'] );
                } elseif ( ! empty( $posts ) ) {
                    $query['post__in'] = $posts;
                }

                if ( empty( $query['post__in'] ) ) {
                    $query['post__in'] = array( 0 );
                }
                
            }
        }

        return $query;
        
    }
    
}

new JSF_Search_By_Post_Tiltle();

Insert the code into the “functions.php” file of your current active child theme (for that, proceed to the WordPress Dashboard > Appearance > Theme File Editor > functions.php)  or to the Code Snippets plugin (or any other similar plugin that allows adding PHP snippets).

Set up a search filter

Then, we can create a Search Filter. Enter the Filter Name and pick the “Search” Filter Type.

Select the “By Custom Field (from Query Variable)” option in the Search by field. The Placeholder field can be set up according to your needs; we leave its default setup.

Add the “search__post_title” configuration to the Query Variable field.

Add the search filter to the page

Now we can apply the filter to the Products Grid widget, following the How to Apply Filters to the Products Grid Widget tutorial.

When ready, click the “Publish” button.

Check how the search filter works on the front end

The filter is ready for use. Open the page on the front end to test how it works.

When we search by product’s title (“Polo”, for example), we get the correct results.