Customizing the Homepage of WooCommerce Storefront and Its Child Themes

By default, Storefront WooCommerce theme by WooThemes displays a maximum number of four(4) feature, recent, on sale and top rated products in four columns while the product categories are in three columns.

WooCommerce Storefront theme

This also hold true for its child theme save for Boutique which displays a limit of three homepage products in three columns.

In this tutorial, i will show us how to increase the number of feature, recent, on sale and top rated products displayed in Storefront and its child themes (Deli, Boutique, Galleria) as well as their title.

Note: the code snippets below work for Storefront and its child themes.

Storefront Recent Products

The code below will increase the limit of recent products to six(6) and set the column display to three(3).


add_filter( 'storefront_recent_products_args', 'w3guy_storefront_recent_products', 199 );

function w3guy_storefront_recent_products( $args ) {
$args['limit'] = 6;
$args['columns'] = 3;

return $args;
}

Storefront Popular Products

The code below will increase the limit of popular products to nine(9) and set the column display to three(3).


add_filter( 'storefront_popular_products_args', 'w3guy_storefront_popular_products', 199 );

function w3guy_storefront_popular_products( $args ) {
$args['limit'] = 9;
$args['columns'] = 3;

return $args;
}

Storefront On sale Products

The code below will increase the limit of on-sale products to ten(10) and set the column display to five(5).


add_filter( 'storefront_on_sale_products_args', 'w3guy_storefront_on_sale_products', 199 );

function w3guy_storefront_on_sale_products( $args ) {
$args['limit'] = 10;
$args['columns'] = 5;

return $args;
}

Storefront Product Categories

The code below will increase the number of product categories to six(6), set the column display to three(3) and change the title from Product Categories to Shop Categories.


add_filter( 'storefront_product_categories_args', 'w3guy_storefront_product_categories', 199 );

function w3guy_storefront_product_categories( $args ) {
$args['limit'] = 6;
$args['columns'] = 3;
$args['title'] = 'Shop Categories';

return $args;
}

Note

The folks at WooThemes uses a 99 hook priority when overriding storefront configuration in its child themes.

For our filter configuration to take precedence over that of storefront child themes, a hook priority higher than 99 is needed thus the 199 in our codes.