The filtering widget provided by Woocommerce is genuinely very impressive. It works perfectly, but lacks one very important feature – you can’t clear the filters as standard.
After a quick Google (I do this before rolling any solution on my own!) I found this excellent and concise post. The post answers the question, but I felt that it left a question unanswered, and that is “how do I actually add this solution to the Woocommerce Layered Nav widget?”. I’m going to show you a very easy way of doing this, albeit not the most scalable.
A quick aside first. If you’re ever planning on editing the core of a plugin, please either make the change and submit a pull request if you’re able to, or simply get in touch with the developer and explain what you’ve changed and why. Luckily in this case you only need to add in one extra line of code. Make sure you check if there are any built-in hooks available for you to hook in to before adding your own. Editing the core of anything is always the last resort.
With that being said, here’s what you need to do:
Generating a clear filters link
We need a way of generating the default (filterless) URL for the current product category. Luckily, we found a solution when Googling the problem earlier:
<?php $filterreset = $_SERVER['REQUEST_URI']; $filterreset = strtok($filterreset, '?'); ?> <a href="<?php echo $filterreset; ?>">Clear Filters</a>
Creating the hook
Next we need to make sure this is being added to the relevant place within the widget. To do this, we’ll add in a hook to the plugin core (that 1 line we mentioned above). Add the code below to the the closing unordered list (UL) tag of the following file:
/wp-content/plugins/woocommerce/includes/widgets/class-wc-widget-layered-nav.php
<?php do_action( 'joe_woocommerce_layered_nav_bottom' ); ?>
It’ll look something like this:
It’s good practice to prefix your name or an identifiable keyword to any code you add yourself to other people’s code, hence my hook begins with “joe_”. The rest of the hook follows a fairly obvious and semantic naming convention.
Bringing it all together
Now all we need to do as mash these two solutions together to make sure they’re working with eachother. The hook we added to the plugin file allows us to insert code into that exact position from anywhere in our code – we’ll be doing it from the theme’s functions.php file.
Go to /wp-content/themes/<your-theme-name>/functions.php and add the following code:
add_action('joe_woocommerce_layered_nav_bottom', 'add_clear_filters');
function add_clear_filters() {
$filterreset = $_SERVER['REQUEST_URI'];
$filterreset = strtok($filterreset, '?');
echo'<a href="'.$filterreset.'">Clear Filters</a>';
}
EDIT:
In my heist to quickly write this post, I overlooked the fact that this clear filters link was going to show 100% of the time, even if no filters are set. We need to fix that!
Let’s set a conditional to check whether or not the URL contains the string “?filters_”. If it does, then we’ll simply execute the code to generate the link, otherwise we’ll do nothing. Replace the above code with this:
add_action('joe_woocommerce_layered_nav_bottom', 'add_clear_filters');
function add_clear_filters() {
$filterreset = $_SERVER['REQUEST_URI'];
if ( strpos($filterreset,'?filter_') !== false ) {
$filterreset = strtok($filterreset, '?');
echo '<div class="clear-filters-container"><a id="woo-clear-filters" href="'.$filterreset.'">X Clear Filters</a></div>';
}
}
With a little bit of styling, here’s what my implementation of this looks like…
Without filters:
With filters set:
I edited this post instead of replacing the existing content as I think being able to observe thought processes as and when they happen is pretty important to truly understanding a tutorial/process/language/whatever.
Sources:
Leave a comment
Was this helpful? Did I miss something? Do you have a question? Get in touch, or tell me below.