How to Add a Custom Product Filter to the WooCommerce Shop Page Using a Custom Plugin

WooCommerce is one of the most flexible eCommerce platforms, allowing store owners to customize nearly every aspect of their online store. Among the many customization options available, product filtering plays a crucial role in helping customers quickly find the products they want, resulting in a smoother shopping experience and improved conversions.

Although WooCommerce provides built-in filtering widgets, they may not always meet the specific requirements of every store. For example, you might want to display a custom filter only on the shop page, customize its appearance, or filter products based on a specific product attribute. In these situations, creating a custom product filter offers greater flexibility and control over your store’s functionality.

In this tutorial, you’ll learn how to create a custom product filter for the WooCommerce shop page using a lightweight custom plugin. As an example, we’ll build a filter that allows customers to browse products by the Color attribute. The same approach can also be extended to other product attributes such as Size, Brand, or Material, making it easy to tailor the filtering experience to your store’s requirements.

Why Add a Custom Product Filter?

A custom product filter helps customers quickly narrow down products based on specific attributes, making it easier to find exactly what they need. This not only improves the overall shopping experience but also helps store owners present their products more effectively.

Some of the key benefits of adding a custom product filter include:

• Improve product discoverability by helping customers quickly locate relevant products.
• Enhance the shopping experience with an intuitive and user-friendly filtering system.
• Reduce bounce rates by allowing visitors to find products faster instead of leaving the store.
• Increase conversion rates by simplifying the product selection process and reducing purchase friction.
• Customize filters based on your business needs, such as filtering by Color, Size, Brand, Material, or any other WooCommerce product attribute.

By implementing attribute-based filters, customers can browse your product catalog more efficiently, leading to a faster, more convenient, and personalized shopping experience.

Step 1: Create a Custom Plugin

The first step is to create a custom WooCommerce plugin that will contain all the code required for the product filter. Using a custom plugin instead of adding code to your theme’s functions.php file is considered a best practice because the functionality remains intact even if you switch themes, making it easier to maintain and reuse.

Navigate to the wp-content/plugins/ directory of your WordPress installation and create a new folder with a unique name, for example, custom-product-filter. Inside this folder, create a PHP file with the same name as the folder:

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 an effective way to improve product discovery and enhance the shopping experience. By implementing the filter through a custom plugin, you keep your code organized, maintainable, and easy to extend.

Using the approach demonstrated in this tutorial, you can easily create attribute-based filters for Color, Size, Brand, or any other WooCommerce product attribute to meet your store’s specific requirements.

Need Help or Have Suggestions?

Having trouble or looking to enhance this functionality? Our team is here to help!

You can reach us anytime:

👉 Support Portal: Create a Support Ticket
📧 Email: [email protected]