We Make Amazing Free Storefront Child Themes for WordPress & WooCommerce

View Our Newest Theme
Posted on

How to change the number of products per row in WooCommerce and Storefront

So let’s say you want to change the number of products per row in WooCommerce and your Storefront Child Theme. It’s pretty easy to do and to make look good.

You’ll first need to add some PHP code and then some CSS and you should be golden.

Here is the php code which goes in your Storefront child theme’s functions.php file:

add_filter( 'storefront_loop_columns', 'sf_child_products_per_row' );
function sf_child_products_per_row() {
	return 5;
}

The number 5 is what you’ll want to change to however many products you want per row.

All this code really does is add a class of last to the 5th item in the row. And that class has a margin-right of 0 which is what you want.

Then in your child CSS file you’ll want to take care of the width of each product and the margin to the right of each product.

.site-main ul.products li.product {
    width: calc( ( 100% - ( 30px * ( 5 - 1 ) ) ) / 5 );
    float: left;
    margin-right: 30px;
}

Everywhere you see the number 5 in this css is for the number of products per row that you chose from above. The number 30 is for the number of pixels between each product.

That’s it, you’ll probably also want to make sure this doesn’t mess with your mobile css as well.

We Make Amazing Free Storefront Child Themes for WordPress & WooCommerce

View Our Newest Theme

Leave a Reply

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