Filter by Custom Taxonomy & Child Category in WooCommerce

This code adds a drop down menu to filter products by custom taxonomy and another to filter by child categories assigned to that specific custom taxonomy type. The code :

• Uses ajax to display your filtered results without refreshing the page.
• Removes the default loop so only the filtered products are displayed.
• Includes basic CSS for styling the drop down search forms.
• Includes code to create you own custom taxonomy name and generate a box to search/add terms on every single product page.
• Displays a custom message or the default no posts found notice.

You can use use the code with any custom taxonomy and any WooCommerce taxonomy including product_cat and product_tag to filter by multiple taxonomies.

Demo Video

Shows results displaying for products assigned the same custom taxonomy and with the same child product taxonomy. In this case, the custom taxonomy is named brand and the children are from the product category taxonomy.

Installation

Add the PHP code at the end of your child themes functions file.

Optional CSS

Add to your child themes stylesheet or additional CSS field and clear caching.

#categorysearchform {
    margin-bottom: 20px;
}

#brand,
#product_cat {
    width: 200px;
    padding: 10px;
    margin-right: 10px;
    font-size: 14px;
}

#searchsubmit {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.woocommerce-shop li.product {
    list-style-type: none;
}

.woocommerce-page .woocommerce-pagination,
.woocommerce-page .woocommerce-result-count {
    display: none;
}

• How To Filter Products by Attributes in WooCommerce
• How To Filter Shop Page Items by 1 or More Product Categories in WooCommerce
• Filter Products by Category and Same Tag in WooCommerce