Extending WooCommerce Storefront

When you are installing the Storefront theme as discussed in our earlier post WooCommerce Storefront Theme Configuration you are given a teaser with options to extend WooCommerce Storefront. A couple of enhancements using plugins as well as possible child themes are mentioned. Let’s go through them in this post.

Storefront Enhancing Plugins

Storefront recommend a couple of plugins you can use to extend it, to make it easier to work with this theme as well enhance it with more features. Here is the list of the plugins for extending WooCommerce Storefront:

  • Powerpack ($59)
  • Mega Menus ($39)
  • Reviews ($19)
  • Pricing Tables ($19)
  • Product Hero ($19)
  • Blog Customizer ($19)
  • Parallax Hero ($19)

NB  Addons only works with Storefront

As you can see these are all commercial plugins that you need to pay for. They are not for free as WordPress is. Well, I would say WordPress is not really for free either as it will require your time and $ to make it work for your business too, but that is another debate. Do I think some of these plugins are useful?

Powerpack

Well the Powerpack is not cheap, but it is an interesting extension. It is an addon that basically allows you to customize way more elements of your theme in the customizer without the need for extra coding in a child theme or plugins. What does it allow you to do more besides what you can in Storefront is:

  • header customization including logo, cart and navigation
  • styling – adjust font families, font size color, margins and padding
  • checkout options – option to go for distraction free checkout or keep two step checkout
  • homepage editor – basic homepage editor to add calls to action and configure general layout
  • product page editor – edit product page layout

Powerpack Features

Mega Menus

Must say I find it a bit expensive for a menu enhancement, but it is a solid mega menu that offers multiple options to create a solid mega menu dropdown to show store items with or without images. And it allows you to drag and drop multiple types of widgets inside the menu from the customizer. And Magento has extensions for similar or more expensive prices.

Example:

Storefront Mega Menu

Reviews

A lot of themes have basic reviews built in when they are catering to the e-commerce crowd and there are universal WordPress review plugins out there so you do not really need this one per se. But this is a solid review plugin with multiple display options. You can

  • display it as a slider or in blocks,
  • use three styling options and there is a
  • review scope you can configure to display certain specific reviews, reviews from certain products, load the most ones recent first

Pricing Table

A lot of themes do have pricing tables built in. Either via a page builder like Visual Composer or simply as a custom post type. So what does this addon have to offer that we may like? Well, nothing much really besides the fact that the customizing can be done in the customizer. So I am not that impressed really.

Pricing Tables

Product Hero

This is more like a slider that integrates well with Storefront and WooCommerce. But frankly as I am using Revolution Slider already that can do that and more I do not see the advantage of using this Product Hero slider.

Product Hero

Blog Customizer

The blog customizer is a useful addon. What it does it that it allows you to pick a certain blog layout. You may like the classical one after another blog article look or the magazine look with several next to each other. It also allows you to move the post meta data around. This means you can decide where the sidebar with additional information goes, if the category and tag details should go to the end of the post or just below the title and so on.

However, most multi purpose themes with or without a builder or even with the builder alone will allow you to do this all. So if you are going for a page builder like Beaver Builder or the Visual Composer you can probably go without this addon.

Parallax Hero

Parallax scroll or the display of content parallax style has been popular since 2012 or s0. Designer Depot mentioned this on it in 2013 in a blog post:

parallax scroll is when content scrolls at different speeds, creating a sense of perspective and therefore depth.

Some clients really love it for blogs, others for the homepage. Well, the parallax hero can enhance your Storefront Hero header with the parallax hero scroll effect. I do (no longer ) like this effect and I think it is a bit outdated now. But it is an easy implementation of it. So if you, or your client, likes it go ahead and purchase this addon.

Child Themes

There are a whole bunch of child themes available and all for just $39 bucks. So if the style of Storefront is not appealing to you and you do not want to code your own child theme to change its looks you should have a look at the child themes available.

Storefront Child Themes

Now, I think the WooCommerce team, nowadays a part of Automattic, does a solid job coding these themes and design wise there are some really nice ones. So do have a look. The advantage here is that these all work with Storefront and saves you the extra coding. It may still be needed that you want further tweaks. In that case it is better to convert a child theme into a new version. The only downside as always is that updates for that child theme can then no longer be applied with ease. But hey if the child theme gets you closer to your goal then go for it!

Child Themes in Detail

I won’t be discussing the child themes in detail now. What I will do is that I will create a new post in the future on adding one of these child themes and my and or my client’s experience with that particular theme. This post took quite some time already and is rather large and insightful already so hope you are happy with the content for this blog post as it is for now.

WooCommerce Featured Products Page

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(); ?>