Storefront Theme: How to Customize Homepage Layout

Storefront is a free theme (with 100,000+ active install), developed & designed by WooCommerce Core Developers. I’ve put together a list of snippets so that you can quickly and easily customize your Storefront Homepage.

Storefront Homepage

The Storefront theme’s Homepage has 6 sections:

  1. Page Content
  2. Product Categories section
  3. Featured Products section
  4. Recent Products section
  5. Top Rated Products section
  6. On Sale Products section
  7. Best Selling Products section

How To Setup Storefront Homepage

To display Homepage sections on your homepage, you have to assign the Homepage template to your page.

storefront homepage template

Follow these steps to display storefront sections on your homepage:

  1. Go to Dashboard -> Pages and create a page title homepage
  2. On the right hand side, you will find a box titled “Page Attributes
  3. Select “Homepage” from “Template” drop-down.
  4. Click on Update to save the change.

Add / Re-order / Remove Homepage Sections

How To Re-order Storefront Homepage Sections

You can easily re-order your Storefront homepage sections using WooThemes Homepage Control plugin. Follow below steps to re-order your homepage sections:

  1. Download & Install Homepage Control
  2. Go to Appearance -> Customize -> Homepage Control
  3. Drag & re-order the sections according to your need.
  4. Click on Save & Publish to save the changes.

How To Remove Sections from Storefront Homepage

You can remove or hide the any sections (e.g.: Product category, Recent, Best-selling) from your homepage using Homepage Control plugin.

Follow these steps to remove homepage sections:

  1. Download & Install Homepage Control
  2. Go to Appearance -> Customize -> Homepage Control
  3. Un-check the box beside the sections you do want to display.
  4. Click on Save & Publish.

How To Add A Full Width Slider To Storefront Homepage

You can add any slider to your storefront homepage using Storefront Add Slider plugin. Follow these steps:

  1. Download & install Storefront Add Slider
  2. Go to Appearance -> Customize -> Static Front Page
  3. Paste your slider shortcode in Slider Shortcode field
  4. Click on Save & Publish

Set Background Color / Image

Adding Background Image To Storefront Homepage Sections

By default, Storefront homepage has 6 sections. You can display product categories, Recent products, Featured products, popular products, On Sale products and Best Selling products.

If we want to add a background image to those sections, we have to identify the class of each sections. Here is the class of each sections.

.storefront-product-categories{}
.storefront-recent-products{}
.storefront-featured-products{}
.storefront-popular-products{}
.storefront-on-sale-products{}
.storefront-best-selling-products{}

Now let’s set a background image to Storefront Homepage featured products section. Insert the below css in Appearance -> Customize -> Additional CSS

.storefront-featured-products{
      background-image: url(https://www.storefront.www.businessbloomer.com/wp-content/uploads/2017/08/Featured-pattern.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      -o-background-size: cover;
}

Adding Background Color To Storefront Homepage Sections

.storefront-featured-products {
  background-color:#FFEB3B;
}

 

Customize Storefront Homepage Section Title

How to Remove or hide the Homepage Section Title

If you want to get rid of the section title (Shop by Category,” “New In,” or “Best Sellers”) from your homepage, insert this in Additional CSS

.storefront-recent-products .section-title {
   display:none;
}

How To Change the Homepage Section Title

If you want to change the section title (Shop by Category,” “New In,” or “Best Sellers”) to something else, you have to do this via hooks.

Here is a list of all storefront homepage section filters:

storefront_product_categories_args
storefront_recent_products_args
storefront_featured_products_args
storefront_popular_products_args
storefront_on_sale_products_args
storefront_best_selling_products_args

Insert this in your themes functions.php to change the featured product section title:

add_filter( 'storefront_featured_products_args', 'bbloomer_storefront_product_featured_title');

function bbloomer_storefront_product_featured_title( $args ) {
    $args['title'] = 'New Featured Products Title Here';
    return $args;  
}

Customize Number of Products / Column

How To Increase Homepage Section Product Per Page

add_filter( 'storefront_featured_products_shortcode_args', 'bbloomer_storefront_featured_product_per_page' );

function bbloomer_storefront_featured_product_per_page( $args ) {
	$args['per_page'] = 10;
	return $args;
}

How To Increase Homepage Section Product Column Grid / Column

add_filter( 'storefront_featured_products_shortcode_args', 'bbloomer_storefront_featured_product_per_row' );

function bbloomer_storefront_featured_product_per_row( $args ) {
	$args['columns'] = 2;
	return $args;
}

Customizing Storefront Product categories

How To Display More Categories on Homepage

add_filter( 'storefront_product_categories_shortcode_args', 'bbloomer_storefront_category_per_page' );

function bbloomer_storefront_category_per_page( $args ) {
	$args['number'] = 10;
	return $args;
}

Other Customizations

How To Add a Description Below Homepage Section Title

add_action( 'storefront_homepage_after_featured_products_title', 'bbloomer_storefront_product_featured_description');

function bbloomer_storefront_product_featured_description(){ 
   echo '<p>Section description here</p>';
}

Top Rated Products

How To Remove Top Rated Products Section from Storefront Homepage

There are two ways you can remove the Top Rated Products section from your Homepage template. One is installing Homepage Control plugin and the other is removing using the hooks. Lets see how we can remove the Top Rated Products section using Hooks. Place this in your themes functions.php

remove_action( 'homepage', 'storefront_popular_products', 50 );

How To Change Background Color of Top Rated Products

If you want to change the background color of Top Rated or Popular Products section, then insert this in Appearance > Customize > Additional CSS.

.storefront-popular-products {
  background-color:#FFEB3B;
}

How To Remove Top Rated Products Section Title

Insert this in Appearance > Customize > Additional CSS to remove or hide the On Sale Products section title.

.storefront-popular-products .section-title {
 display:none;
}

How To Change Top Rated Products Section Title

If you want to change the section title from “On Sale” to anything else, just insert this snippet at the bottom of your child theme functions.php

add_filter( 'storefront_popular_products_args', 'bbloomer_storefront_product_popular_title');

function bbloomer_storefront_product_popular_title( $args ) {
    $args['title'] = __( 'Top Products', 'storefront' );
    return $args;  
}

How To Display More Products on  Top Rated Section

By default Storefront Top Rated Products section displays 4 products. Lets increase it to 12 products.

add_filter( 'storefront_popular_products_shortcode_args', 'bbloomer_storefront_top_product_per_page' );

function bbloomer_storefront_top_product_per_page( $args ) {
	$args['per_page'] = 12;
	return $args;
}

How To Add a Text Below Top Rated Products Section

This code snippet will let you add text or HTML depending on your need below the Top Rated Products section title. Just place PHP this snippet at the bottom of your child theme functions.php file before “?>”

add_action( 'storefront_homepage_after_popular_products_title', 'bbloomer_storefront_top_product_description');

function bbloomer_storefront_top_product_description(){ ?>
   echo "Section description here";
}

On Sale Products

How To Remove On Sale Products Section from Storefront Homepage

There are two ways you can remove the On Sale Products section from your Homepage template. One is installing Homepage Control plugin and the other is removing using the hooks. Lets see how we can remove the On Sale Products section using Hooks. Place this in your themes functions.php

remove_action( 'homepage', 'storefront_on_sale_products', 60 );

How To Change Background Color of On Sale Products

If you want to change the background color of On Sale Products section, then insert this in Appearance > Customize > Additional CSS.

.storefront-on-sale-products {
  background-color:#FFEB3B;
}

How To Remove On Sale Products Section Title

Insert this in Appearance > Customize > Additional CSS to remove or hide the On Sale Products section title.

.storefront-on-sale-products .section-title {
   display:none;
}

How To Change On Sale Products Section Title

If you want to change the section title from “On Sale” to anything else, just insert this snippet at the bottom of your child theme functions.php

add_filter( 'storefront_on_sale_products_args', 'bbloomer_storefront_product_sale_title');

function bbloomer_storefront_product_sale_title( $args ) {
    $args['title'] = __( 'Huge Discount', 'storefront' );
    return $args;  
}

How To Display More Products on  On Sale Section

By default Storefront On Sale Products section displays 4 products. Lets increase it to 12 products.

add_filter( 'storefront_on_sale_products_shortcode_args', 'bbloomer_storefront_sale_product_per_page' );

function bbloomer_storefront_sale_product_per_page( $args ) {
	$args['per_page'] = 12;
	return $args;
}

How To Add a Text Below On Sale Products Section

This code snippet will let you add text or HTML depending on your need below the On Sale Products section title. Just place PHP this snippet at the bottom of your child theme functions.php file before “?>”

add_action( 'storefront_homepage_after_on_sale_products_title', 'bbloomer_storefront_sale_product_description');

function bbloomer_storefront_sale_product_description(){ ?>
   echo "Section description here";
}

Best Selling Products

Best Selling Products sections displays most sold products of your store. Simply put, it sort all the products by total sales and display them in a descending order.

How To Remove Best Selling Products from Storefront Homepage

There are two ways you can remove the Best Selling section from your Homepage template. One is installing Homepage Control plugin and the other is removing using the hooks. Lets see how we can remove the Best Selling Products section using Hooks. Place this in your themes functions.php

remove_action( 'homepage', 'storefront_best_selling_products', 70 );

How To Change Background Color of Best Selling Products

If you want to change the background color of Best Selling Product section, then insert this in Appearance > Customize > Additional CSS.

.storefront-best-selling-products {
  background-color:#FFEB3B;
}

How To Remove Best Selling Products Section Title

Insert this in Appearance > Customize > Additional CSS to remove or hide the Best Selling Product section title.

.storefront-best-selling-products .section-title {
   display:none;
}

How To Change Best Selling Products Section Title

If you want to change the section title from “Best Sellers” to anything else, just insert this snippet at the bottom of your child theme functions.php

add_filter( 'storefront_best_selling_products_args', 'bbloomer_storefront_product_best_title');

function bbloomer_storefront_product_best_title( $args ) {
    $args['title'] = __( 'Most Sold', 'storefront' );
    return $args;  
}

How To Change Number of Best Selling Products

By default Storefront Best Selling section displays 4 products. Lets increase it to 12 products.

add_filter( 'storefront_best_selling_products_shortcode_args', 'bbloomer_storefront_best_product_per_page' );

function bbloomer_storefront_best_product_per_page( $args ) {
	$args['per_page'] = 12;
	return $args;
}

How To Add a Text Below Best Selling Products Section

This code snippet will let you add text or HTML depending on your need below the best selling section title. Just place PHP this snippet at the bottom of your child theme functions.php file before “?>”

add_action( 'storefront_homepage_after_best_selling_products_title', 'bbloomer_storefront_best_product_description' );

function bbloomer_storefront_best_product_description(){ ?>
   echo "Section description here";
}

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • Storefront Theme Visual Hook Guide
    Here’s a visual hook guide for Storefront Theme by WooCommerce. This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations. Also, you can copy & paste in seconds and speed up your customization time. Let me […]
  • WooCommerce: Hide “Showing x-y of z results” @ Shop Page
    This is quite an annoying thing in WooCommerce when you have just a few products. Besides, if you only have 1 product in a given category, the notice “Showing the Single Result” will appear on top of the category page. So, how do we remove the whole “Showing 1–15 of 178 results” element from the […]
  • WooCommerce: Add an Icon to the Add to Cart Buttons
    Ecommerce is all about user experience, and making it easier for people to add to cart and checkout smoothly. Reducing the number of checkout fields is a great idea for example – as well as graphically communicating your number 1 objective: “please add to cart now!”. So, how do you add an icon (or an […]
  • WooCommerce + Storefront Theme: Hide Homepage Title
    The Storefront theme displays the homepage H1 title by default, no matter if you use the “Default” or the “Homepage” page template. Of course, you could do it via CSS, with a simple “display:none”. Even better, you could completely avoid loading the homepage title by using PHP (SEOs out there: better not to load an […]
  • WooCommerce: 10 Crucial Issues That Should Be Fixed Right Now
    I just spent the last 3 days in Porto with another 2,300 WordPressers at the first in-person WordCamp Europe since Berlin 2019. I had a blast, held a nice (yet long) workshop, spoke to many, but got tired too soon. Later on, I realized that that tiredness was something more serious – in fact I […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *