How to Add a Custom Product Filter on the WooCommerce Shop Page?

WooCommerce is a highly flexible eCommerce platform that allows store owners to customize almost every aspect of their online store. One of the most important features for improving user experience is product filtering.

While WooCommerce provides basic filtering options by default, these may not always be sufficient for advanced store requirements. In such cases, creating a custom product filter becomes the best solution.

In this guide, we’ll show you how to add a custom product filter on the WooCommerce shop page using a lightweight custom plugin. As an example, we’ll create a Color-based product filter using WooCommerce product attributes.

Why Add a Custom Product Filter?

Custom product filters help you:

• Improve product discoverability
• Enhance user experience
• Reduce bounce rate
• Increase conversion rates
• Tailor filters according to your business needs

By adding attribute-based filters (such as color, size, brand, etc.), customers can quickly find the products they’re looking for.

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 attribute filter to the WooCommerce shop page
 * Version: 1.0.0
 * Author: Webkul
 */

defined( 'ABSPATH' ) || exit;

/**
 * Display custom product filter dropdown on shop page
 */
add_action( 'woocommerce_before_shop_loop', 'wk_custom_product_filter' );

function wk_custom_product_filter() {

	if ( ! is_shop() ) {
		return;
	}

	$taxonomy = 'pa_color';

	if ( ! taxonomy_exists( $taxonomy ) ) {
		return;
	}

	$terms = get_terms(
		array(
			'taxonomy'   => $taxonomy,
			'hide_empty' => true,
		)
	);

	if ( empty( $terms ) || is_wp_error( $terms ) ) {
		return;
	}

	$current_color = isset( $_GET['product_color'] )
		? sanitize_text_field( wp_unslash( $_GET['product_color'] ) )
		: '';
	?>

	<form method="get" class="wk-custom-filter-form">
		<select name="product_color">
			<option value=""><?php esc_html_e( 'Filter by Color', 'textdomain' ); ?></option>

			<?php foreach ( $terms as $term ) : ?>
				<option value="<?php echo esc_attr( $term->slug ); ?>" <?php selected( $current_color, $term->slug ); ?>>
					<?php echo esc_html( $term->name ); ?>
				</option>
			<?php endforeach; ?>
		</select>

		<?php
		// Preserve existing query params (orderby, pagination, etc.)
		foreach ( $_GET as $key => $value ) {
			if ( 'product_color' === $key ) {
				continue;
			}

			if ( is_array( $value ) ) {
				continue;
			}

			echo '<input type="hidden" name="' . esc_attr( $key ) . '" value="' . esc_attr( sanitize_text_field( wp_unslash( $value ) ) ) . '">';
		}
		?>

		<button type="submit">
			<?php esc_html_e( 'Apply Filter', 'textdomain' ); ?>
		</button>
	</form>

	<?php
}

/**
 * Modify WooCommerce product query based on selected filter
 */
add_action( 'pre_get_posts', 'wk_custom_product_filter_query' );

function wk_custom_product_filter_query( $query ) {

	if ( is_admin() || ! $query->is_main_query() || ! is_shop() ) {
		return;
	}

	if ( empty( $_GET['product_color'] ) ) {
		return;
	}

	$color = sanitize_text_field( wp_unslash( $_GET['product_color'] ) );

	$tax_query = (array) $query->get( 'tax_query' );

	$tax_query[] = array(
		'taxonomy' => 'pa_color',
		'field'    => 'slug',
		'terms'    => $color,
	);

	$query->set( 'tax_query', $tax_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 yet powerful way to improve your store’s usability and performance. By using a custom plugin approach, you ensure clean code, better maintainability, and future scalability.

With the example shared above, you can quickly build attribute-based filters tailored to your store’s requirements.

Need Help or Have Suggestions?

Still facing issues or want to enhance this functionality further?
Feel free to raise a support ticket or share your feedback with us:

👉 Support Portal: https://webkul.uvdesk.com/en/customer/create-ticket/
📧 Email: [email protected]

Thanks for reading — and happy coding! 🚀