WooCommerce. How change amount of products per row

Hello, this tutorial shows how to change the number of product columns in your WooCommerce store.

WooCommerce. How change amount of products per row

You can set the products on your Homepage using a shortcode. You can also see products displaying on the Category page or the main Shop page.

In order to change the number of columns on your Homepage, you should follow the steps listed below:

1. Open your WordPress admin panel and navigate to Pages > All Pages;

2. Select Home from the list of the available pages:

   

3. Scroll down the page content to find a corresponding shortcode and edit the number of columns:

   

4. Save the changes and check your Homepage.

In case you increased/decreased the number of columns and the page layout looks broken, please follow these steps:

1. Connect to your FTP and follow this path wp-content/theme/themeXXXXX/style.less:

   

2. Open the style.less file with the code editor and look for the responsive CSS code for the product columns layout:

   					@media (min-width: 1200px) {
   						width: 270px;
   						margin-left: 30px;
   					}
   					@media (min-width: 768px) and (max-width: 979px) {
   						width: 166px;
   						margin-left: 20px;
   						padding-bottom: 10px;
   					}
   					@media (max-width: 767px){
   						width: 31%;
   						margin-left: 2%;
   
   					}
   					@media (max-width: 650px){
   						padding-bottom: 10px;
   					}
   					@media (max-width:480px){
   						width: 47%;
   						margin: 0 1% 20px;
   						display: inline-block;
   						vertical-align: top;
   						float: none;
   					}
   					@media (max-width:320px){
   						width: 100%;
   						margin-left: 0;
   						display: block;
   					}
   

3. You can change the width for the different device layouts to make the columns fit:

   

4. Save the changes and re-upload the file to your server.

In order to change the number of columns on the Category page, please follow these steps:

1. Open your WordPress admin panel and navigate to Appearance > Editor;

2. Locate the file called custom-function.php under your child theme:

   

3. Press Ctrl+F and look for the following text in the mentioned file: Change columns number;

4. You will see the following part of the code, where you can edit the number of columns:

   // Change columns number
   		// ---------------------
   		add_filter( 'loop_shop_columns', 'tm_product_columns', 5);
   		function tm_product_columns($columns) {
   			if ( is_shop() || is_product_category() || is_product_tag() ) {
   				$columns = 3;
   				return $columns;
   			}
   		}
   

   

5. Save your changes and check the website.

Feel free to check the detailed video tutorial below:

WooCommerce. How change amount of products per row