Building a Checkbox Filter in Woocommerce

Recently, during a large Woocommerce build, a client wanted me to create a checkbox filter for specific products. No problem, I said. This is how I did it.

Note: To successfully complete this project, I would suggest using a Child Theme to make changes to your template files. You will also need to have Woocommerce plugin installed. You will also need to have access to your theme files via File Manager or FTP.

My first step was to figure out the best way to sort these products. The client has a large catalog and I had two options: create a taxonomy with the two filter items or use tags. After realizing that the taxonomy approach would require submitting a form with a button, I decided to go with tags.

The best part about tags is that you can add a small url parameter to filter items. This parameter can be appended to the url easily, and when checked, it automatically runs the query, so no need for a submit button.

Original Domain:
www.domain.com/products

Domain with tag parameter:
www.domain.com/products?product_tag=custom-tag

What this does is filter items on the product page that have the tag ‘custom-tag’ product tag. The first step here is to add tags to the items you want to filter. For this example, I’m going to tag the products I want to filter with Cheap and Expensive- obviously you’ll want to use something more relevant to your products. In order to test effectiveness, you should set up multiple products with these tags as well as some without tags.

All you really need in a store

Now that my products are set up, it’s time to start coding. I’ve decided to set this up in my theme, but you might want to create a plugin so it will work no matter what theme you use.

First, I’m going to create a shortcode that adds the checkboxes to the product page. Pop this code into your functions.php file.

// Add this to functions.php
function sc_custom_tag_filter(){ 
  $return .='
   <form id="cheap">
    <div class="range-check">
     <input class="ajax-checkbox" type="checkbox" value="cheap" id="cheap-check" name="product_tag" onChange="this.form.submit()" />
     <label>Cheap</label>
     <div class="range-desc">
      Products for people who like saving money.
     </div>
   </div>
  </form>
  <form id="expensive">
   <div class="range-check">
     <input class="ajax-checkbox" type="checkbox" value="expensive" id="expensive-check" name="product_tag" onChange="this.form.submit()" />
     <label>Expensive</label>
     <div class="range-desc">
      Products for people spending money they don\'t have.
     </div>
   </div>
  </form>
  <div class="small"><a href="#" class="deselect" onChange="this.form.submit()">Clear Filter</a>
 ';
 return $return;
}
add_shortcode( 'sc_custom_filter', 'sc_custom_tag_filter' );

What this does is create a form with two checkboxes; they are labeled and have a short description. Beneath is a link to clear the url if they don’t want any filters. They can also choose to uncheck the checkboxes. This is inside a shortcode function so the checkboxes can be added in a widget or sidebar using shortcode [‘sc_custom_filter’] (some users have experienced issues copy/pasting the shortcode so just type it in where you want it to show up).

Not great, but on our way

It doesn’t look great and it’s also not really working yet, so let’s create a javascript file to make the magic happen.

//Create a new JS file
jQuery(document).ready(function() {
    if (window.location.href.indexOf("cheap") > -1) {
      	jQuery('#cheap input[type="checkbox"]').prop('checked', true);
    }
});
jQuery(document).ready(function() {
    if (window.location.href.indexOf("expensive") > -1) {
      	jQuery('#expensive input[type="checkbox"]').prop('checked', true);
    }
});
jQuery("a.deselect").each(function(){
	this.search = "";
});

This code simply ensures that the checkboxes stay checked and that the deselect link works to clear out the URL. There are a few ways you can add this script. I would create a new js file and enqueue it in your functions.php file. If you know that it will only be running on specific pages, you can create a function to keep it from running constantly.

/* Insert in your functions.php file to enqueue your JS file the code will differ slightly if using a child theme. Change path and filename */
wp_enqueue_script( 'misc', get_theme_file_uri( '/pathto/yourfile.js' ), array('jquery'), '1.0' , true );

Great- now we have a working filter! But it’s really not great looking. Let’s pop in some CSS to polish it up and we should be good to go!

/* Add to style.css and change to your taste */
input.ajax-checkbox, .range-check label{
  display:inline;
}
.range-check label{
  font-weight:700 !important;
  font-size:16px;
  position:relative;
  top:2px;
}
form{
  margin-bottom:15px;
}

Voila! We have a functioning checkbox tag filter without a heavy plugin weighing your site down. Here, I’ve added it to a Text widget in the sidebar but you can add it anywhere.

It really works…
Share on facebook
Share
Share on twitter
Tweet
Share on linkedin
Share
Share on pinterest
Pin

Leave a Comment

Other Stuff You Might Like

Copyright – Stafford Creative