{"id":41615,"date":"2015-02-11T01:19:53","date_gmt":"2015-02-11T06:19:53","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=41615"},"modified":"2016-04-12T09:58:20","modified_gmt":"2016-04-12T13:58:20","slug":"woocommerce-how-change-amount-of-products-per-row","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/woocommerce-how-change-amount-of-products-per-row.html","title":{"rendered":"WooCommerce. How change amount of products per row"},"content":{"rendered":"

\r\n

Hello, this tutorial shows how to change the number of product columns in your WooCommerce store.<\/p>\r\n

WooCommerce. How change amount of products per row <\/a><\/p>\r\n

You can set the products on your Homepage<\/strong> using a shortcode. You can also see products displaying on the Category<\/strong> page or the main Shop<\/strong> page.<\/p>\r\n

In order to change the number of columns on your Homepage<\/strong>, you should follow the steps listed below:<\/p>\r\n

    \r\n
  1. \r\n

    Open your WordPress admin panel and navigate to Pages > All Pages<\/strong>;<\/p>\r\n<\/li>\r\n

  2. \r\n

    Select Home<\/strong> from the list of the available pages: <\/p>\r\n

    \"WooCommerce.<\/a>\r\n<\/li>\r\n

  3. \r\n

    Scroll down the page content to find a corresponding shortcode and edit the number of columns:<\/p>\r\n

    \"WooCommerce.<\/a>\r\n<\/li>\r\n

  4. \r\n

    Save the changes and check your Homepage<\/strong>.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

    In case you increased\/decreased the number of columns and the page layout looks broken, please follow these steps:<\/p>\r\n

      \r\n
    1. \r\n

      Connect to your FTP and follow this path wp-content\/theme\/themeXXXXX\/style.less<\/strong>:<\/p>\r\n

      \"WooCommerce.<\/a>\r\n<\/li>\r\n

    2. \r\n

      Open the style.less<\/strong> file with the code editor and look for the responsive CSS code for the product columns layout:<\/p>\r\n

      \r\n\t\t\t\t\t@media (min-width: 1200px) {\r\n\t\t\t\t\t\twidth: 270px;\r\n\t\t\t\t\t\tmargin-left: 30px;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t@media (min-width: 768px) and (max-width: 979px) {\r\n\t\t\t\t\t\twidth: 166px;\r\n\t\t\t\t\t\tmargin-left: 20px;\r\n\t\t\t\t\t\tpadding-bottom: 10px;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t@media (max-width: 767px){\r\n\t\t\t\t\t\twidth: 31%;\r\n\t\t\t\t\t\tmargin-left: 2%;\r\n\r\n\t\t\t\t\t}\r\n\t\t\t\t\t@media (max-width: 650px){\r\n\t\t\t\t\t\tpadding-bottom: 10px;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t@media (max-width:480px){\r\n\t\t\t\t\t\twidth: 47%;\r\n\t\t\t\t\t\tmargin: 0 1% 20px;\r\n\t\t\t\t\t\tdisplay: inline-block;\r\n\t\t\t\t\t\tvertical-align: top;\r\n\t\t\t\t\t\tfloat: none;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t@media (max-width:320px){\r\n\t\t\t\t\t\twidth: 100%;\r\n\t\t\t\t\t\tmargin-left: 0;\r\n\t\t\t\t\t\tdisplay: block;\r\n\t\t\t\t\t}\r\n<\/pre>\r\n<\/li>\r\n
    3. \r\n
      You can change the width for the different device layouts to make the columns fit:<\/p>\r\n
      \"WooCommerce.<\/a>\r\n<\/li>\r\n
    4. \r\n
      Save the changes and re-upload the file to your server.<\/p>\r\n<\/li>\r\n<\/ol>\r\n
      In order to change the number of columns on the Category<\/strong> page, please follow these steps:<\/p>\r\n
        \r\n
      1. \r\n
        Open your WordPress admin panel and navigate to Appearance > Editor<\/strong>;<\/p>\r\n<\/li>\r\n
      2. \r\n
        Locate the file called  custom-function.php<\/strong> under your child theme:<\/p>\r\n
        \"WooCommerce.<\/a>\r\n<\/li>\r\n
      3. \r\n
        Press Ctrl+F<\/strong>  and look for the following text in the mentioned file: Change columns number<\/strong>;<\/p>\r\n<\/li>\r\n
      4. \r\n
        You will see the following part of the code, where you can edit the number of columns: <\/p>\r\n
        \/\/ Change columns number\r\n\t\t\/\/ ---------------------\r\n\t\tadd_filter( 'loop_shop_columns', 'tm_product_columns', 5);\r\n\t\tfunction tm_product_columns($columns) {\r\n\t\t\tif ( is_shop() || is_product_category() || is_product_tag() ) {\r\n\t\t\t\t$columns = 3;\r\n\t\t\t\treturn $columns;\r\n\t\t\t}\r\n\t\t}\r\n<\/pre>\r\n
        \"WooCommerce.<\/a>\r\n<\/li>\r\n
      5. \r\n
        Save your changes and check the website.<\/p>\r\n<\/li>\r\n<\/ol>\r\n
        Feel free to check the detailed video tutorial below:<\/p>\r\n
        WooCommerce. How change amount of products per row <\/a><\/p>\r\n
        <\/p>","protected":false},"excerpt":{"rendered":"
        This tutorial shows how to change the number of product columns in your WooCommerce store<\/p>\n","protected":false},"author":64,"featured_media":43701,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1556],"tags":[656,668,542,1756,2418],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/41615"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=41615"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/41615\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/43701"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=41615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=41615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=41615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}