WooCommerce Product Category List

woocommerce-product-category.php

<?php
/**
 * @package Woocommerce Product Category List
 * @version 1.0
 */
/*
Plugin Name: Woocommerce Product Category List table
Plugin URI: https://www.linkedin.com/in/elleryleung
Description: This plugin is just add a new shortcode: <code>[bp_product_category]</code> to list all product categories in div format.
Author: Ellery Leung
Version: 1.0
Author URI: https://www.linkedin.com/in/elleryleung
*/

if(!function_exists("bp_get_all_subcats")){
	function bp_get_all_subcats($cat_id){
		$allSubcats = array();

		// http://wordpress.stackexchange.com/questions/101268/display-all-the-subcategories-from-a-specific-category
		$args = array(
			'hierarchical' => 1,
			'show_option_none' => '',
			'hide_empty' => 0,
			'parent' => $cat_id,
			'taxonomy' => 'product_cat'
		);
		$allSubcats = get_categories($args);

		// print '<pre>'; print_r($allSubcats); print '</pre>';
		if(count($allSubcats) > 0){
			foreach($allSubcats as $sc){
				$cats = bp_get_all_subcats((int)$sc->cat_ID);
				if(!empty($cats)){
					$allSubcats = array_merge($allSubcats, $cats);
					// print '<pre>'; print_r($allSubcats); print '</pre>';
				}
			}
		}
		return $allSubcats;
	}
}

add_shortcode('bp_product_category', function($attr){
	// $a = shortcode_atts( array(
	//     'foo' => 'something',
	//     'bar' => 'something else',
	// ), $attr);

	$terms = get_terms('product_cat', array(
				'taxonomy' => 'product_cat'
			));

	?>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>-->
	<?php
	if (count($terms) > 0) {
		// http://wordpress.stackexchange.com/questions/163372/how-to-get-woocommerce-product-category-link-by-id
		// https://developer.wordpress.org/reference/functions/get_term_link/
		// print '<pre>'; print_r($terms); print '</pre>';
		?>
		<style type="text/css">
		.bp_product_list .bp_sub_title a,
		.bp_product_list .bp_sub_title a:hover,
		.bp_product_list .bp_sub_title a:visited{
			color:black;
			font-size:13px;
		}
		.bp_product_list .bp_product_item,
		.bp_product_list .bp_product_item a:hover,
		.bp_product_list .bp_product_item a:visited{
			color:#337ab7;
			font-size:12px;
		}
		.bp_product_list .bp_product_item i{
			font-size:12px;
			padding-right:7px;
		}
		.bp_product_list ul{
			margin-left: 10px;
		}
		</style>
		<div class="container-fluid bp_all_products">
			<h5 class="bp_main_title">商品種類</h5>
			<div class="row">
				<?php
					$tmpl = '<a href="%s">%s</a>';

					foreach ($terms as $term) {
						$args = array(
						    'posts_per_page' => -1,
						    'product_cat' => $term->slug,
						    'post_type' => 'product',
						);
						$query = new WP_Query($args);

						$termLink = sprintf('<a href="%s" style="color:blue;text-decoration: underline;">%s</a>', get_term_link($term->term_id), $term->name);
						?>						
						<div class="bp_product_list col-sm-4 col-xs-6">
							<!-- <h5 class="bp_sub_title"><?=$term->name;?></h5> -->
							<h5 class="bp_sub_title"><i class="fa fa-circle-o" style="font-size: 12px;" aria-hidden="true"></i>&nbsp;&nbsp;<?=$termLink;?></h5>
							<ul class="list-unstyled" style="display:none;">
							<?php
								while($query->have_posts()) : $query->the_post(); 
									// global $product; 
									$link = sprintf($tmpl, get_permalink(get_the_ID()), get_the_title());
									?><li class="bp_product_item"><i class="fa fa-circle-o" aria-hidden="true"></i><?=$link;?></li><?php
								endwhile;
							?>
							</ul>
						</div>
						<?php
					}
				?>
			</div>
		</div>
		<?php
	}
});