Need some idea on creating product category filter for woocommerce

[nzrink1]

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="http://iceiceicy.com/wingwah/">Latest</a>
</li>
<li onclick="men()">
<a class="men-link" href="http://iceiceicy.com/wingwah/brand/mens-watches/" >Men</a>
</li>
<li onclick="women()">
<a class="women-link" href="http://iceiceicy.com/wingwah/brand/ladies-watches/">Women</a>
</li>
<li onclick="newWatch()">
<a class="new-link" href="http://iceiceicy.com/wingwah/product-category/new-watch-2/">New</a>
</li>
<li onclick="powned()">
<a class="powned-link" href="http://iceiceicy.com/wingwah/product-category/used-watch/">Pre-Owned</a>
</li>
<li onclick="unworn()">
<a class="unworn-link" href="http://iceiceicy.com/wingwah/product-category/unworn/">Unworn</a>
</li>
</ul>	
</div>

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?