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.
![](https://wpsites.net/wp-content/uploads/2024/07/filter-taxonomy-ec-product-taxonomy.png)
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;
}
You must be logged in to post a comment.