Product Category blocks (default 3) on homepage are one of the most prominent areas of JustShop theme. Different people might have different use for this area. The "above the fold" area of a webpage is most important area which gains users attention first.



By default these blocks are the WooCommerce Product categories linking to their respective category archive page. These are being built from the WooCommerce shortcode: [product_category]

There is also a widget ready sidebar area to make it possible for you to enter whatever you want into this section. Whether you want to put in a welcome paragraph for visitors, or maybe a welcome image or something else.

To make use of the widget ready sidebar area:

  • Go to Widgets and place any widget in "Homepage" sidebar. Now, those default product category blocks will not be seen and instead of that your widget content appears in its place.


If you want to keep the same category block design and need to replace product categories or edit text 'view more' or images, then follow these steps:

  1. Go to Appearance –» Widgets and drag Text Widget in "Homepage" sidebar.
  2. Do not enter any title for the Text widget
  3. Copy and paste the well commented code given below into the textarea.

     

    <div class="woocommerce woocommerce-wrap">
  <div class="widget widget_woo_product_categories">
  <div class="woocommerce woocommerce-columns-3">
  <ul class="products">
   
  <!-- first product begins -->
  <li class="product product-category first">
   
  <h3> Celebration Cakes </h3>
  <div class="img-wrap">
  <img width="280" height="180" alt="Celebration Cakes" src="http://templatation.com/justshop/layout2/wp-content/uploads/sites/3/2013/07/prod29-280x180.jpg">
  <div class="shade-a"></div>
  <div class="shade-b"></div>
  </div> <!--/.wrap-->
   
  <div class="description">These cakes are perfect for celebration and parties. Sed diam non ummy nibh in euismod tincidunt ut liber tempor laoreet.</div>
  <a href="http://templatation.com/justshop/layout2/product-category/celebration-cakes/" class="readmore">
  <span class="view-more">View More</span></a>
   
  </li>
  <!-- first product ends -->
  <!-- second product begins -->
  <li class="product product-category">
   
  <h3> Celebration Cakes </h3>
  <div class="img-wrap">
  <img width="280" height="180" alt="Celebration Cakes" src="http://templatation.com/justshop/layout2/wp-content/uploads/sites/3/2013/07/prod29-280x180.jpg">
  <div class="shade-a"></div>
  <div class="shade-b"></div>
  </div> <!--/.wrap-->
   
  <div class="description">These cakes are perfect for celebration and parties. Sed diam non ummy nibh in euismod tincidunt ut liber tempor laoreet.</div>
  <a href="http://templatation.com/justshop/layout2/product-category/celebration-cakes/" class="readmore">
  <span class="view-more">View More</span></a>
   
  </li>
  <!-- second product ends -->
  <!-- third product begins -->
  <li class="product product-category last">
   
  <h3> Celebration Cakes </h3>
  <div class="img-wrap">
  <img width="280" height="180" alt="Celebration Cakes" src="http://templatation.com/justshop/layout2/wp-content/uploads/sites/3/2013/07/prod29-280x180.jpg">
  <div class="shade-a"></div>
  <div class="shade-b"></div>
  </div> <!--/.wrap-->
   
  <div class="description">These cakes are perfect for celebration and parties. Sed diam non ummy nibh in euismod tincidunt ut liber tempor laoreet.</div>
  <a href="http://templatation.com/justshop/layout2/product-category/celebration-cakes/" class="readmore">
  <span class="view-more">View More</span></a>
   
  </li>
  <!-- third product ends -->
  </ul>   
  </div>
  </div>   
</div>

     


You can modify above code as per your needs, and place it into the text-widget we created in above step.Note: Do not enter any text title for the Text widget


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; }

 


Hope this helps :)