Woo: вывод категорий над списком товаров

functions.php

/* Выводим категории над списком товаров */
function woocommerce_product_category( $args = array() ) {
  $woocommerce_category_id = get_queried_object_id();
  $args = array(
    	'parent' => $woocommerce_category_id
  );
  $terms = get_terms( 'product_cat', $args );
  if ( is_product_category() ) {
	if ( $terms ) {
    	echo '<ul class="woocommerce-categories">';
    	foreach ( $terms as $term ) {
        	echo '<li class="woocommerce-product-category-page">';
			echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
            woocommerce_subcategory_thumbnail( $term );
			echo '</a>';
			echo '<h2>';
        	echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
        	echo $term->name;
        	echo '</a>';
        	echo '</h2>';
        	echo '</li>';
    	}
    	echo '</ul>';
  	}
  }
}

add_action( 'woocommerce_before_main_content', 'woocommerce_product_category', 100 );

style.css

/* Вывод категорий над товарами */
ul.woocommerce-categories {
	text-align: center;
	font-size: 0.5em;
	padding: 0;
  margin: 0 0 5em 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
	
	-webkit-flex-wrap: wrap;
  flex-wrap: wrap;
	
	justify-content: flex-start;
}

/* выводим элементы в 4 столбца */
li.woocommerce-product-category-page {
	margin-left: 5%;
	margin-bottom: 2%;
	width: 21.25%;
}

/* Убираем отсуп слева у первого элемента на следующих рядах */
li.woocommerce-product-category-page:nth-child(4n+1) {
	margin-left: 0%;
}

/* === На мобильных === */
@media (max-width: 480px) {
	
	/* выводим элементы в 2 столбца */
	li.woocommerce-product-category-page {
		margin-left: 5%;
		margin-bottom: 0;
		width: 47.5%;
	}

	/* Убираем отсуп слева у первого элемента на следующих рядах */
	li.woocommerce-product-category-page:nth-child(2n+1) {
		margin-left: 0%;
	}
}