Clearing All Filters in WooCommerce Layered Navigation

WooCommerce Layered Navigation is great for giving your online store visitors easy to use filters.

I added the “Active Filters” widget to my sidebar so that users could easily see and remove any filters they have applied. It looks like this:

active filters woocommerce

But I also wanted to add a link to “Clear All Filters” with one click.   Here’s how I did that.

1. Install Enhanced Text Widget

If you don’t yet have a widget that allows you to paste PHP code, you need to install one.  I recommend the Enhanced Text Widget.

2. Position the Widget for your “Clear All Filters” hyperlink

Drag an Enhanced Text Widget onto your shop sidebar.  If you’re using the Active Filters widget it makes sense to put it directly under this.  Otherwise, position it wherever you want the “Clear All Filters” link to appear for your users.

3. Paste this Code into the Widget


<?php $filterreset = $_SERVER['REQUEST_URI'];
if ( strpos($filterreset,'?filter_') !== false | strpos($filterreset,'?min_price') !== false | strpos($filterreset,'?max_price')) {
 $filterreset = strtok($filterreset, '?');
 echo '<div class="clear-filters-container"><a id="woo-clear-filters" href="'.$filterreset.'">Clear All Filters</a></div>';
 }

What this code does:

  1. Firstly it checks to see if any filters have been applied – it checks checks for normal attribute filters, min_price filter and a max_price filters.
  2. If filters are not currently applied, then it doesn’t output anything.  If any filter is applied, it shows the hyperlink.
  3. The hyperlink is the current URL, with the filter parameters stripped off.  When the user clicks the page reloads with the filters removed.

If you don’t want to use PHP in a widget you can insert this code into a custom plugin or functions.php in your child theme.

 

This article combined code snippets from these two great articles, (plus a bit of additional code from me):

ClickNathan: Clearing All Filters Set by Woocommerce Layered Navigation

JoeTannorella: How to Clear/Reset Woocommerce Layered Nav Widget Filters

 

  • hello, i used your code, but i have a problem
    The reset filter function was also placed on the right side of my product page

    • Josh Moore

      Hi Lucian. On the site I built I didn’t have a sidebar on the individual product pages. Since it sounds like you do, you’ll need to use Widget Logic to hide this widget on your product pages. https://wordpress.org/plugins/widget-logic/

  • Tamara

    Hi Josh. I know this post is kind of old but I’m trying this technique anyway. The original code provided by Click Nathan works fine. But when I use your code to make the clear filters link show only when filters are applied, it doesn’t appear unless I try to clear one filter manually. Any suggestions?

Powered by WordPress. Designed by Woo Themes