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


Hope this helps :)