Problem Description:

Each of our eCommerce themes shop and product catalog templates are designed to display a specific number of columns to fit the overall style of the theme and to achieve proper balance in the design. This designation affects the ability for your shop to respond to different screen sizes, which is why we do not allow the WooCommerce image size to dictate the column width in pixels.

 

We understand that in cases where you have the sidebar disabled for the shop, you may want the product thumbnails to stay the original size but flow into more columns than default. This article provides a quick CSS snippet that will work for themes that show 3 products or columns with or without the sidebar.

For best results we do NOT recommend you do this with the sidebar enabled, as it may not work correctly or may shrink the product thumbnails down so small that the product content and buttons do not fit correctly. For themes that show two columns by default, the same styling resets can be used to achieve the same results, you would only need to change the threes to twos and the 3s to 2s, 4s to 3s and 5s to 4s, etc

Answer:

This article contains information related to Advanced Customization and is provided as-is. We are unable to support problems that result in using code snippets found here, especially if the article was not written for your theme . For additional information on Advanced Customization and your support options, please see this FAQ

Add the following to the Custom CSS box in Theme Options/ General under the Custom Styling section:

.three-column .products .product {
    width: 21.5556% !important;
}
.three-column .products .product:nth-child(3n+4) {
    clear: none !important;
}
.three-column .products .product:nth-child(3n+3) {
     margin-right: 2.66667% !important;
}
.three-column .products .product:nth-child(4n+5) {
    clear: left !important;
}
.three-column .products .product:nth-child(4n+4) {
    margin-right: 2.66667% !important;
}