Common category page to view category and subcategory according to menu organize.

archive.php

<?php get_header(); ?>

<div id="banner-area" class="banner-area" style="background-image:url(<?php echo get_template_directory_uri(); ?>/images/banner/banner2.jpg)">
		<!-- Subpage title start -->
		<div class="banner-text text-center">
     		<div class="container">
	        	<div class="row">
	        		<div class="col-xs-12">
	        			<div class="banner-heading">
	        				<h1 class="page-title" style="color:#FFF; text-transform:uppercase;"><?php
    printf( __( '%s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' );
?></h1>
	        			</div>
			        	
	        		</div>
	        	</div>
       	</div>
    	</div><!-- Subpage title end -->
	</div>

	<section id="main-container" class="main-container">

		<div class="container">
			<?php 
				$term = get_queried_object();
				$term_id = $term->term_id;
				$term_name = $term->name;
				$parent_id = empty( $term_id ) ? 0 : $term_id;
				$product_categories = get_categories(array(
														'parent'       => $parent_id,
														//'menu_order'   => 'ASC',
														'hide_empty'   => 0,
														'hierarchical' => 1,
														'taxonomy'     => 'product_cat',
														'pad_counts'   => 1,
														'order'        => 'DESC',
    													'orderby'      => 'name'
														)
													);
			//echo $parent_id;
			//echo $category_link;
		 	$product_categories = wp_list_filter( $product_categories ); 
		 	//var_dump($product_categories); 
		 	if($product_categories){ ?>
		 		<div class="row">
			 	<?php foreach ($product_categories as $category) { 
			 		$term_link = get_term_link($category->term_id, 'product_cat'); 
			 		$image = get_field('image', $category);
			 		$image = if($image)?$image:'https://wp.goigi.me/graykon/wp-content/uploads/2017/12/noimage.png';
			 		?>
		 		
			 		<div class="col-md-3">
					   <div class="ts-service-wrapper">
					      <div class="ts-service-image-wrapper">
					         <span class="ts-service-image">
								 <a href="<?php echo $term_link; ?>"><img src="<?php echo $image; ?>" style="height: 210px; width: 210px;"></a> 
					         </span>
					      </div>
					      <div class="ts-service-info">
					        	<a href="<?php echo $term_link; ?>"><h4 class="texti"><?php echo $category->name;?> </h4></a> 
					      </div>
					   </div>
					</div><!-- Col 1 end -->
			 	
			 	<?php } //end foreach ?>

		 	</div>
		 	<?php } else { ?>

			<div class="row">
				<?php 
				if (get_query_var('paged')) {
                    $paged = get_query_var('paged');
                    } elseif (get_query_var('page')) { 
                        $paged = get_query_var('page');
                    } else {
                        $paged = 1;
                    }
                    

                    $args = array(
						'post_type' => 'product',
						'tax_query' => array(
							array(
							'taxonomy' => 'product_cat',
							'field' => 'id',
							'terms' => $term_id
							 )
						  ),
						'numberposts' => -1,
						'posts_per_page' => 20,
						'post_status'     => 'publish',
						'post_parent' => null,
						'paged' => $paged,
						'order' => 'DESC'
						);
                  
	
			$custom_query = new WP_Query($args);
			if ($custom_query->have_posts()) :
    			 while ($custom_query->have_posts()) : $custom_query->the_post();	
				?>
 
				<div class="col-md-3">
				   <div class="ts-service-wrapper">
				      <div class="ts-service-image-wrapper">
				         <span class="ts-service-image">
							<a href="<?php the_permalink(); ?>"><?php  the_post_thumbnail( array(230,140)); ?></a>
				         </span>
				      </div>
				      <div class="ts-service-info">
				        	<a href="<?php the_permalink(); ?>"><h4 class="texti"><?php /*echo wp_trim_words( get_the_title(), 4, '...' );*/ 
				        	the_title(); ?> </h4></a>
				        	
                         <a href="<?php the_permalink(); ?>"  class="texta"> Detail> </a>
				        
				      </div>
				   </div>
				</div><!-- Col 1 end -->
                <?php endwhile;?>
                
			<div class="gap-30"></div>
          <?php if ($custom_query->max_num_pages > 1) :
          $orig_query = $wp_query;
          $wp_query = $custom_query;
           
          ?>
          <div class="paging text-center">
              <?php
              if (function_exists('wp_bootstrap_pagination'))
                  wp_bootstrap_pagination();
              ?>
          </div>
          <?php $wp_query = $orig_query; ?>
      <?php endif;
          wp_reset_postdata();
      else:
          echo '<p>' . __('Sorry, no posts matched your criteria.') . '</p>'; 
      endif;  
		?>
	</div><!-- Content row 1 end -->


<?php }	?>

  </div>
</section>
<?php get_footer(); ?>
<style>
h4.texti {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
</style>