How To Filter Shop Page Items by 1 or More Product Categories in WooCommerce

The code in this download folder adds a filter for categories before the shop page in WooCommerce. The filter enables customers to select one or more product categories and display all products assigned to the selected categories on the shop page using ajax.

When categories in the filter are selected, the default shop page loop is removed and only the filtered products are shown as seen in the following demo video.

Demo Video

Shows how the filter replaces the default shop page products with products selected by category in WooCommerce.

No plugins required.

Code Installation

There’s 3 steps :

1. Copy and paste the PHP code from the functions.php file to the end of your child themes functions file.
2. 
   

   Upload the filter.js file to your child theme folder.

   
   
3. 
   

   Copy and paste the CSS to the end of your child themes style.css file and clear all types of caching.

   
   

How The Code Works

WordPress Action Hooks

• The `add_action` function is used to add custom functions to specific WordPress action hooks.
• Two action hooks are used: `wp_ajax_filter_products` and `wp_ajax_nopriv_filter_products`.
• These hooks are used for handling Ajax requests for filtering products.

Ajax Filter Function

• The `filter_products` function is the callback function for the Ajax request.
• It retrieves the selected product categories from the Ajax POST data.
• A custom query is then used to fetch products based on the selected categories.
• The retrieved products are looped through and their content is output.

Conditional Check for Shop Page

• The `is_shop()` function is used to check if the current page is the WooCommerce shop page.
• This conditional check ensures that certain modifications are applied only on the shop page.

Select2 Initialization

• The `$('#category-filter').select2();` line initializes the Select2 library on the category filter dropdown.
• Select2 enhances the appearance and functionality of standard dropdowns.

Category Filter Change Event

• The `$('#category-filter').change(function() {` block triggers when the category filter dropdown changes.
• It retrieves the selected categories, initiates an Ajax request, and handles the response.

Hide Default Products Container

• `$('#products-container').hide();` hides the default products container before the Ajax request.
• This ensures that the default products are not visible when the filter is applied.

Ajax Request Configuration

• The `$.ajax({ ... })` block configures and sends an Ajax request to the server.
• It includes the selected categories in the request data and specifies the callback function on success.

Display Filtered Products

• In the success callback, `$('#filtered-products-container').html(response).show();` displays the filtered products.
• The content of the response (filtered products) is injected into the `#filtered-products-container` element.

Output Default Product Loop

• The default product loop is output using `woocommerce_product_loop_start()` and `woocommerce_product_loop_end()` functions.
• The loop includes a conditional check to display only if custom products are not being displayed.

Conditional Output of Filtered Products

• Inside the filtered products container, there is logic to output custom products if the filter is active.
• The template checks for selected categories and fetches products accordingly.

Related Solutions

• Filter Products by Category and Same Tag in WooCommerce
• How To Filter Products by Attributes in WooCommerce
• Filter by Custom Taxonomy & Child Category in WooCommerce