WooCommerce: How to Change the Number of Shop Columns

How To  Tutorials  Last Updated: Time to Read: 1 minute

By default, WooCommerce outputs products in 3 columns with a sidebar, or three columns with no sidebar. The columns themselves are sized according to the width of the container they are in vs the browser window width, equally in 3rds 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 max-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 How to Configure WooCommerce for Layers

To learn how best to setup WooCommerce take part in this online course on Treehouse.

Using a plugin is  the easiest and recommended way to customize the shop layouts. The StoreKit extension for Layers adds several customization options for WooCommerce, including the number of columns in the catalog. View Details.

See our Child Theme Author Guide for how to setup a child theme the right way.

Open the functions.php file for your child theme and add the following code to the bottom

Do not add these functions to the Layers  functions.php or it may cause a function conflict!

Example: Output 2 columns per row with sidebar


For help and support of WooCommerce and custom functions, visit the WooCommerce Support site.
To learn how best to setup WooCommerce take part in this online course on Treehouse.