Open up template-home.php (found in themes/justshop) and find this code:

 

<!-- product categories block -->
   <div class="woocommerce woocommerce-wrap">
     <?php
       if ( ! dynamic_sidebar( 'homepage' ) ) {
       if ( 'true' == $settings['homepage_enable_product_categories'] && is_woocommerce_activated() ) {
       the_widget( 'Woo_Product_Categories', array( 'title' => $settings['homepage_product_categories_title'], 'categories_per_page' => intval( $settings['homepage_product_categories_limit'] ) ) );
       }
     }

 



Now, all you have to do is replace the above code with the code shown below:

 

<!-- Portfolio items block -->
  <div class="woocommerce woocommerce-wrap">
  <?php get_template_part( 'includes/home-portfolio' ); ?>
  </div>
<!--/.woocommerce-->

 



Please note that the third product might fall into second line, so to fix it , please add following css code in Theme-Options > General > Display > Custom Css box:


 

.home .widget_woo_product_categories ul.products li.product.product-category:last-child{ margin-right:0; }

 


Explanation: What we are doing above is calling an external file to show portfolio items (home-portfolio.php)
Please put second attached file in <theme-root>/includes folder of the theme. See attachment to this thread (file 'home-portfolio.zip') or download it from here: https://www.dropbox.com/s/0o5owph9rc836ze/home-portfolio.zip

============================


For situations when NOT using WooCommerce plugin, you will need to manually put styles in Theme Options>General>Display>CustomCSS box to style these 3 boxes well.

Notes:

Default styling is written in woocommerce.css file which only triggers when WooCommerce plugin is installed.

'YOURWEBSITE' should be replaced by your original URL.

 

==========================

 

 

.home div.woocommerce-wrap {
    margin: 0 auto;
    max-width: 950px;
    width: 100%;
}
ul.products {
    list-style: outside none none;
}
ul.products li.product.first {
    clear: both;
}
.home .widget_woo_product_categories ul.products li.product.product-category {
    float: left;
    margin-right: 25px;
max-width: 280px;
    padding: 0 10px;
}
.page-template-template-home-php ul.products li.product.product-category .img-wrap {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 1px solid #E0DDDD;
  display: block;
  margin: 0 0 23px;
  padding: 10px;
  position: relative;
}
.page-template-template-home-php ul.products li.product.product-category .img-wrap img {
  border: 3px solid #E4DFDF;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  max-height: 161px;
  max-width: 98%;
}
.page-template-template-home-php ul.products li.product.product-category .shade-a ,
.page-template-template-home-php ul.products li.product.product-category .shade-b {
  background: url("http://YOURWEBSITE/wp-content/themes/justshop/images/pink/sprite-a.png") no-repeat scroll 0 0 transparent;
  display: block;
  height: 62px;
  position: absolute;
  width: 63px;
  z-index: 1;
}
.page-template-template-home-php ul.products li.product.product-category .shade-a {
  background-position: -54px -267px;
  left: -12px;
  top: -12px;
}
.page-template-template-home-php ul.products li.product.product-category .shade-b {
  background-position: -125px -267px;
  bottom: -12px;
  right: -12px;
}


ul.products li.product span.view-more {
  display: none;
}
.home ul.products li.product.product-category h3 {
    font-size: 24px;
    padding-bottom: 0.5em;
}
ul.products li.product.product-category h3 {
  padding-bottom: 1em;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  text-align: right;
}
ul.products li.product.product-category a.readmore {
  background: url("http://YOURWEBSITE/wp-content/themes/justshop/images/border-d.gif") no-repeat scroll center 8px transparent;
  color: #FFFFFF;
  height: 30px;
  font-size: 14;
  line-height: 27px;
  display: block;
  text-align: center;
   margin:10px 0 0;
}
ul.products li.product.product-category span.view-more {
  background: url("http://YOURWEBSITE/wp-content/themes/justshop/images/background.gif") repeat scroll center 0 transparent;
  border-radius: 3px; 
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px; 
  box-shadow: 0 2px 0 #917460; 
  -moz-box-shadow: 0 2px 0 #917460; 
  -webkit-box-shadow: 0 2px 0 #917460;
  padding: 0 17px;
  display: inline-block;
  font-style:italic;
  text-transform: lowercase;
  font-family:Philosopher,Georgia,serif;
}
ul.products li.product.product-category .description,
ul.products li.product.product-category p{
  margin: 10px 0 0;
}
ul.products li.product .prod-excerpt,
ul.products li.product .excerpt {
  font-family: 'PT-Sans',Tahoma,Geneva,sans-serif;
  font-size: 12.5px;
  margin: 1em 0;
}
.home .widget_woo_product_categories ul.products li.product.product-category:last-child{ margin-right:0; }

 

Note:

  • Make sure you have taken a backup of those original files before you edit them.
  • Make sure that your portfolio items have a Featured Image attached to it.