Here’s a little function I’ve made which is quite useful and sought after. We’re going to add a product category filter above the product list for our WooCommerce shop archive pages. Firstly we need to create the dropdown, then it requires styling and a little bit of jQuery script to actually send the user to the right page.
So here’s the first bit, we’re going to use get_terms() to get the product categories being used and pop the values and names into a little select list, heres the code for that, and we’re adding the action to the ‘woocommerce_before_shop_loop’ which will place the select dropdown above the product list on the archive pages.
add_action('woocommerce_before_shop_loop', 'mycustom_product_category_filter');
function mycustom_product_category_filter(){
if(is_tax()){
$thispage = get_queried_object();
$id = $thispage->term_id;
} else {
$id = 0;
}
$product_categories = get_terms(['taxonomy' => 'product_cat',]);
if(!is_wp_error($product_categories) && !empty($product_categories)) { ?>
<div class="product-filter">
<form id="product-filter" class="quick-filter" method="post">
<label>Filter</label>
<p class="select-icon">
<select name="product-category-filter" class="selput">
<option value="0" <?php if($id == 0) echo 'selected'; ?>>All (Default)</option>
<?php foreach($product_categories as $pc) : ?>
<option value="<?= $pc->term_id; ?>" <?php if($id == $pc->term_id) echo 'selected'; ?>><?= esc_html($pc->name); ?></option>
<?php endforeach; ?>
</select>
</p>
</form>
</div>
<?php }
}
That snippet should live in your functions.php file or if you have a file that is included if the woocommerce plugin is active (advisable), tonk it in there.
Next up you’ll want some styling on your form, I’m not going to give you an example as I’m sure you are more than capable of rustling that up yourself, however the classes we have used are ‘.product-filter’ for the outer div, ‘.quick-filter’ for the form, ‘.quick-filter label’ for the label and ‘.quick-filter select’ for the dropdown. I’ve used the paragraph around the select element to display FontAwesome icons to add a bit more individuality to my dropdown!
And finally we will use a little ajax call to grab the url of the page we want to switch to:
First up here’s the script:
if($('form#product-filter').length !== '0' ) {
$('#product-filter p select').change(function(){
var data = {
action: 'get_pcat_href',
pcid: $(this).val(),
};
$.post(ajaxurl, data, function(response){
if(response.success) {
location.href = response.data;
}
});
});
}
I’ve jacked that straight into my main.js file. Note we’re using an undeclared variable (ajaxurl) in there, here is where you can find the code to place that if you’ve not got it already.
And this is the php to go in the functions.php file or similar:
add_action( 'wp_ajax_get_pcat_href', 'get_product_category_href' );
add_action( 'wp_ajax_nopriv_get_pcat_href', 'get_product_category_href' );
function get_product_category_href(){
if(isset($_POST['pcid'])) {
if($_POST['pcid'] > 0) {
$term = get_term_by('id', $_POST['pcid'], 'product_cat');
$href = get_term_link($term);
} else {
$href = home_url('shop');
}
wp_send_json_success($href);
}
wp_die();
}
The only thing to be aware of is the line which send the user to All products, here my shop is on the page ‘http://example.co.uk/shop’ if your shop page is elsewhere you will have to amend this part accordingly.
And that’s all there is to it. You should find a cheeky dropdown at the top of all the shop archive and product category pages now, which will seamlessly take you to the next product category or back to the main shop page when you select it in the dropdown. Enjoy!