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.