How to Add a Dropdown Field to Filter by Brands on the WooCommerce Shop Page?

With the release of WooCommerce 9.6.0, the Brands taxonomy was integrated into WooCommerce core. This update allowed store owners to create and categorize products by brand just like we do for product categories.

While this feature is incredibly useful for store owners, let’s make it even more beneficial for customers. In this guide, we’ll show you how to add a brand filter to the WooCommerce shop page, allowing customers to browse products by their favorite brands with ease.

Solution: Add a Dropdown Field to Filter by Brands on the Shop Page

This code adds a “Filter by Brand” dropdown to the WooCommerce shop page, allowing customers to filter products by their favorite brands.

function ts_display_brand_filter_dropdown() {
    if ( is_shop() || is_product_category() || is_product_taxonomy() ) {
        $brands = get_terms( array(
            'taxonomy'   => 'product_brand',
            'hide_empty' => true,
        ));

        if ( ! empty( $brands ) ) {
            echo '<form method="GET" action="' . esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ) . '">';
            echo '<select name="filter_brand" onchange="this.form.submit();">';
            echo '<option value="">' . esc_html__( 'Filter by Brand', 'woocommerce' ) . '</option>';
            
            foreach ( $brands as $brand ) {
                $selected = ( isset( $_GET['filter_brand'] ) && $_GET['filter_brand'] == $brand->slug ) ? 'selected' : '';
                echo '<option value="' . esc_attr( $brand->slug ) . '" ' . $selected . '>' . esc_html( $brand->name ) . '</option>';
            }

            echo '</select>';
            echo '</form>';
        }
    }
}
add_action( 'woocommerce_before_shop_loop', 'ts_display_brand_filter_dropdown' );
function ts_filter_products_by_brand( $query ) {
    if ( ! is_admin() && $query->is_main_query() && ( is_shop() || is_product_category() || is_product_taxonomy() ) ) {
        if ( isset( $_GET['filter_brand'] ) && ! empty( $_GET['filter_brand'] ) ) {
            $query->set( 'tax_query', array(
                array(
                    'taxonomy' => 'product_brand',
                    'field'    => 'slug',
                    'terms'    => sanitize_text_field( $_GET['filter_brand'] ),
                ),
            ));
        }
    }
}
add_action( 'pre_get_posts', 'ts_filter_products_by_brand' );

Output

As we discussed earlier, the filter by brand dropdown will be displayed on the shop page. When a customer selects a particular brand, only products associated with that brand will be filtered and displayed as shown below.

To simplify store owners’ tasks, we have written various posts on adding filters to the admin side. One such useful customization is adding a custom filter to filter products by shipping class on the admin product page. Such filters are very useful for store owners to quickly filter out products that they need.