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.