Sometimes you would like to have a homepage with WooCommerce featuring products or a separate page to show of your current trending products. In that case you need to create a template that loads certain WooCommerce products. That and some code voodoo.

For the HumbleShop theme we have implemented this for a customer before. Let me show you what code is needed and what it does. If you prefer the full template see the final chapter of this post. Just remember that we load no. of featured items from the theme options page here.

Featured Products Custom Query

To load the featured products you need a custom query with arguments to load them. For that we use the WP_Query class. The custom arguments we added to it are:

• post type
• no of featured products per page
• pagination
• meta query loading the proper meta key and value

<?php
 $num = ot_get_option( 'hs_homefeatno' );
 $paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
 $args = array( 'post_type' => 'product', 'posts_per_page' => $num, 'paged' => $paged );
 $args['meta_query'] = array(); 
 $args['meta_query'][] = array(
 'key' => '_featured',
 'value' => 'yes'
 );
 $loop = new WP_Query( $args );
 while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
 <?php wc_get_template_part( 'content', 'product' ); ?>
 <?php endwhile; ?>
 </div>

With the arguments discussed further below you can start a new instance of WP_Query to load the the featured products. As you can see we added $product as a global variable. This to make the variable available outside the local scope. Reason for using WP Query is to customize the loop ( awesome Treehouse blog post on WordPress Loops) .

Post Type

WooCommerce creates the post type product so we add that as our custom post type to be loaded. It is a custom post type to be precise. WordPress has five post types or content types and they are:

• page,
• posts
• attachments and
• revisions
• navigation menu items

WordPress allows you to add your own and WooCommerce takes care of that for us creation products.

Featured Items Theme Option

To add the no. of featured items to display we added an extra item to the theme options. You could hard code it as well, but this is much more convenient. HumbleShop uses the theme options Options Tree by Valet Designs. Their repository is here in case you want to learn more about it.

Here below the option we added:

 array(
 'id' => 'hs_homefeatno',
 'label' => 'Number of Featured Products',
 'desc' => 'Number of featured products you want to display on homepage',
 'std' => '9',
 'type' => 'text',
 'section' => 'general',
 'rows' => '',
 'post_type' => '',
 'taxonomy' => '',
 'min_max_step'=> '',
 'class' => '',
 'condition' => '',
 'operator' => 'and'
 ),

We load the number added with the code:

ot_get_option( 'hs_homefeatno' )

ot_get_option being an Options Tree option

Pagination

The $paged variable activates pagination for the featured product page. It uses the get_query_var function. The same snippet and more details can be found in this codex article. Basically it loads pagination for the current page. Without it the pagination navigation won’t work. You can add pagination links with the code below:

<nav id="home-products-nav">
 <?php previous_posts_link( '&laquo; PREV', $loop->max_num_pages) ?></li>
 <?php next_posts_link( 'MORE PRODUCTS &raquo;', $loop->max_num_pages) ?>
 </nav>

It works thanks to the earlier added pagination in the custom query.

Meta Query

Meta_Query is part of the WP_Meta_Query class. It is an argument of that class and an array at that. It can contain the meta key (custom field key) and value (custom field value). And this is needed here as we need to check whether a product is featured and if so add it to the loop.

WooCommerce Product Content

Once the loop has been started up we load the products with this WooCommerce request:

wc_get_template_part( 'content', 'product' );

WooCommerce Get Template Code is documented here and the function in detail can be checked here. It looks for the WooCommerce template in your theme root or woocommerce folder inside your theme and then grabs that content. We have woocommerce/content-product.php in the child theme that can be loaded.

NB woocommerce_get_template_part is deprecated and

wc_get_template_part

is the new WooCommerce template tag and recommended now. It has been deprecated since WooCommerce 2.1

After all that code has been added the while loop will be closed. All should be well and then content should be loaded. Pagination loading follows below it, but we covered that discussing the pagination argument for the WP_Query earlier.

Full Template Code

Here below is the full template code we use for displaying the featured posts on the homepage for our HumbleShop child theme. As you can see we load a slider as well. This and some other snippets and html tags we need to display all well. This piece of code and others you can leave out of course.

Just like any other page template you can this one to your theme’s root.

<?php
 /*
 Template Name: Homepage
 */
 get_header(); ?>

<!-- ============ -->
 <!-- MAIN SECTION -->
 <!-- ============ -->
 <div class="container">
 <section class="feat">

<?php get_template_part( 'slider', 'index' ); ?>

<div class="row">

<!-- Content -->
 <div class="col-xs-12">
 <?php while ( have_posts() ) : the_post(); ?>

<div class="row">

</div>

<div class="row">
 <div class="col-xs-12">
 <?php do_action('woocommerce_before_shop_loop'); ?>
 </div>

<div class="products clearfix">
 <?php
 $num = ot_get_option( 'hs_homefeatno' );
 $paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
 $args = array( 'post_type' => 'product', 'posts_per_page' => $num, 'paged' => $paged );
 $args['meta_query'] = array();
 $args['meta_query'][] = array(
 'key' => '_featured',
 'value' => 'yes'
 );

$loop = new WP_Query( $args );
 while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

<?php wc_get_template_part( 'content', 'product' ); ?>

<?php endwhile; ?>
 </div>
 <nav id="home-products-nav">
 <?php previous_posts_link( '&laquo; PREV', $loop->max_num_pages) ?></li>
 <?php next_posts_link( 'MORE PRODUCTS &raquo;', $loop->max_num_pages) ?>
 </nav>
 </div><!--/.products-->

<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'humbleshop' ), 'after' => '</div>' ) ); ?>
 <?php edit_post_link( __( 'Edit', 'humbleshop' ), ' <p class="text-center"><i class="fa fa-pencil"></i>', '</p>' ); ?>
 <?php endwhile; // end of the loop. ?>
 </div>

</div>
 <?php
 $brand = ot_get_option( 'hs_brand' );
 $brandlist = ot_get_option( 'hs_brandlist' );

if ($brandlist) { ?>
 <h5 class="subhead theme brands"><strong><?php echo $brand; ?></strong></h5>

<div class="tab-brand">
 <div id="flexcarousel-brands" class="flexslider">
 <ul class="slides">

<?php foreach($brandlist as $key => $value) {
 echo '<li>';
 if ($value['hs_brandimage']) {
 echo '<img src="'.$value['hs_brandimage'].'" alt="'.$value['title'].'" />';
 } else {
 echo '<img src="http://cambelt.co/200x100" />';
 }
 echo '</li>';
 } ?>

</ul>
 </div>
 </div>
 <?php } ?>

</section>
 </div>

<?php get_footer(); ?>