Introduction
By default, WooCommerce outputs products in 3 columns with a sidebar, or three columns with no sidebar. The columns themselves are sized according to our theme’s design or the maximum width of the browser window (they will scale to different widths on smaller screens, or stack on a mobile to keep things readable). The thumbnail images have separate size dimensions, generally needing to be at least as wide as the column in its widest view.
For tips on what the default image sizes should be, refer to your theme’s Configure WooCommerce article in the Documentation section.
The following can be used if you need the products to output in more or less columns natively without using CSS tricks.
This is considered a modification, and is provided as-is. We expect you understand what you are doing if applying coding changes using these or other WordPress tutorials. Make a backup of your existing file so you can replace it if something goes wrong and you need to start over. Modified files WILL probably be replaced by a theme update at some point, so keep note of your changes for future reference or see our guides below. We cannot assist you with modifying your theme or support problems you encounter as a result!
If you are modifying a theme as part of a client project, the following are really important!
How to Modify Your Theme the Right WayHow to Track Update Changes and Maintain Modifications
To view the CSS-only tutorial that does not require custom functions, see