Problem Description:

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 Way
How to Track Update Changes and Maintain Modifications

To view the CSS-only tutorial that does not require custom functions, see

How can I change the shop to display 4 columns instead of 3?

Answer:

storekit-upsell

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 Way
How to Track Update Changes and Maintain Modifications
  1. Open the functions.php file for your child theme and add the following code to the bottom
  2. If your file has a ?> at the end, remove it and any blank lines at the end of the document (the closing bracket of this code should be the last thing in the file)
  3. Alternatively, create a new file such as woocommerce.php and add it to your child-theme’s ocmx/theme-setup folder (don’t forget the opening <?php at the beginning of your file.)
Do not add these functions to your parent them/original theme in a new file or the functions.php or it may cause a function conflict!

Example: Output 2 columns per row with sidebar

add_filter( 'loop_shop_columns', 'wc_loop_shop_columns', 1, 10 );
 
/*
* Return a new number of maximum columns for shop archives
* @param int Original value
* @return int New number of columns
*/
function wc_loop_shop_columns( $number_columns ) {
return 2;
}