If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

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:

    WooCommerce. How change the amount of products per row-1.jpg

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

    WooCommerce. How change the amount of products per row-2.jpg

  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:

    WooCommerce. How change the amount of products per row-3

  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:

    WooCommerce. How change the amount of products per row-4

  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:

    WooCommerce. How change the amount of products per row-5

  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;
    			}
    		}
    

    WooCommerce. How change the amount of products per row-6

  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

 
Live Chat
We help you to choose the right product.
Start chat