Need some idea on creating product category filter for woocommerce

I’ve a set of div that contain links to the respective product category page (from woocommerce plugin). This div act as a widget on top of product loop.

<div class="tagcloud">
	<ul class="tag-widget">
<li onclick="homepage()">
<a class="all-watches-link" href="">Latest</a>
<li onclick="men()">
<a class="men-link" href="" >Men</a>
<li onclick="women()">
<a class="women-link" href="">Women</a>
<li onclick="newWatch()">
<a class="new-link" href="">New</a>
<li onclick="powned()">
<a class="powned-link" href="">Pre-Owned</a>
<li onclick="unworn()">
<a class="unworn-link" href="">Unworn</a>

Let’s say I want it to work as a product filter where :-

  1. If user go to the brand page and click one of the filter link, it will show only the brand name + the clicked category.
  2. The product result must be instantly show on the same page. AJAX probably gonna take 1-2secs to load the products. I’m thinking of preload each category pages behind the scene and set them to display:none first.

Is it possible and what are the steps that I can take to make it?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.