By default, product categories are styled to display 3 per row.




If you want to change 4, you need to do customization as explained below:

To make the row fit 4 products, we will need to change some styles.

Just copy and paste the below css code in Theme Options > General > Display > Custom CSS box.


 

ul.products li.product.first { clear: none!important; }
.home ul.products li.product.product-category { width: 20%!important; }
.home ul.products li.product.product-category h3 { font-size: 17px!important; }
ul.products li.product.last { margin-right: 25px!important; }

 


Now product category block section will display 4 category blocks instead of 3 on homepage.

Note: Please be careful and take a backup before modifying the values given in above code