woo-isotope-sort.php

<?php
/* Custom woocommerce loop and add to isotope container */

// Display woo products order by price

$args=array(
	'post_type' => 'product',
	'post_status' => 'publish',
	'orderby'   => 'meta_value_num',
	'meta_key'  => '_price',
	'order' => 'ASC',
	'posts_per_page' => -1
);

query_posts($args);
if (have_posts()) : 
?>

<ul id="filters" class="mb20">
    <li class="all_products mb20"><a href="#" data-filter="*" class="selected">All products</a></li>
	<?php
	$argscat=array(
		'taxonomy' => 'product_cat',
		'parent' => 9,
		'order' => 'DESC'
	);
	$terms = get_terms($argscat);
	$count = count($terms);
	if ($count > 0) {
		foreach ( $terms as $term ) {
		echo "<li class='ib'><a href='#' class='catselector ib cat-".$term->term_id."' data-filter='.cat_".$term->term_id."'>" . $term->name . "</a></li>\n";
		}
	}
	?>
</ul>

<div id="isotope-list">

	<?php
	while (have_posts()) : the_post();

		$_product = wc_get_product(get_the_ID()); // get product object
		$price=$_product->get_price(); // get price in numeric type
		$stock=$product->get_stock_quantity(); // get stock quantity

		$term_list = wp_get_post_terms(get_the_ID(),'product_cat',array('fields'=>'ids')); // all product categories
		$cat_id = (int)$term_list[0]; // first product category only
	?>

	<div class="product col item <?php echo 'cat_'.$cat_id; ?>">

		<div class="inner">
			<div class="image pr">
				<?php the_post_thumbnail('medium'); ?>
			</div>
			<h2 class="product-title cred ac ma s20 pr fbold ttn ta n100">
				<a href="<?php echo get_permalink(); ?>" class="cred tc vm lh100"><?php echo get_the_title(); ?></a>
			</h2>
		</div>
	</div>

<?php endwhile; endif; wp_reset_query(); ?>
</div>

<script>
jQuery(document).ready(function($){

	// Custom Isotope for Woocommerce products

	var $container = $('#isotope-list'); //The ID for the list with all the blog posts
	$container.isotope({ //Isotope options, 'item' matches the class in the PHP
		itemSelector : '.item', 
		layoutMode : 'masonry'
	});

	//Add the class selected to the item that is clicked, and remove from the others
	var $optionSets = $('#filters'),
	$optionLinks = $optionSets.find('a');

	$optionLinks.click(function(){
		var $this = $(this);
		
		// don't proceed if already selected
		if ( $this.hasClass('selected') ) {
			return false;
		}

		var $optionSet = $this.parents('#filters');
		$optionSets.find('.selected').removeClass('selected');
		$this.addClass('selected');

		//When an item is clicked, sort the items.
		var selector = $(this).attr('data-filter');
		$container.isotope({ filter: selector });

		return false;
	});
});
</script>