I don\'t like to give end to end solution, but here is the one part from my code which loops through the categories and shows them on the page. You can re-edit them a bit and you will get a desired output:

<?php
echo \'<ul class=\\\"nav nav-tabs\\\" role=\\\"tablist\\\">\';
$args = array(
\'hide_empty\'=> 1,
\'orderby\' => \'name\',
\'order\' => \'ASC\'
);
$categories = get_categories($args);
foreach($categories as $category) { 
echo \'<li><a href=\\\"#\' . $category->name.\'\\\" role=\\\"tab\\\" data-toggle=\\\"tab\\\">\' .      
$category->name.\'</a></li>\';
$cat_name = $category->name;
} 
echo \'</ul>\';
echo \'<div class=\\\"tab-content\\\">\';
foreach($categories as $category) { 
echo \'<div class=\\\"tab-pane\\\" id=\\\"\' . $category->name.\'\\\">\';
$the_query = new WP_Query(array(
\'post_type\' => \'acme_product\',
\'posts_per_page\' => 100,
\'category_name\' => $category->slug
)); 
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php endwhile; 
wp_reset_postdata();
wp_reset_query();
?>   
<?php } 
echo \'</div>\';
?>