2

I am trying to edit the grid.phtml template so my home page New Products widget displays 4 columns instead of 5. There nothing in the file that seems to dictate columns at all. Am I looking in the wrong place to make this edit?

The new_grid.phtml file I am editing is located @

vendor/magento/module-catalog/view/frontend/templates/product/widget/new/content/new_grid.phtml

...which I derived from the shortcode of the widget. Clearly I'm in trying to edit the wrong file.

1 Answer 1

2

The file you are looking for it here:

vendor/magento/module-catalog-widget/view/frontend/templates/product/widget/content/grid.phtml

If you place some dummy text here, you will see if on your home page. So if you want to edit this file further, you can copy it over to your theme.

To answer your question, at this point I have not found a .phtml or .xml that controls the product grids, they are all controlled by the styles based on css breakpoints. If you take a look at this file vendor/magento/theme-frontend-blank/Magento_Catalog/web/css/source/module/_listings.less you will see this:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-products .products-grid .product-item { width: 100%/3 }
    .page-products.page-layout-1column .products-grid .product-item { width: 100%/4 }
    .page-products.page-layout-3columns .products-grid .product-item { width: 100%/2 }
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .products-grid .product-item { width: 100%/5 }
    .page-layout-1column .products-grid .product-item { width: 100%/6 }
    .page-layout-3columns .products-grid .product-item { width: 100%/4 }
    .page-products .products-grid .product-items { margin: 0; }
    .page-products .products-grid .product-item {
        width: 23.233%;
        margin-left: calc(~"(100% - 4 * 23.233%) / 3");
        padding: 0;
        &:nth-child(4n+1) {
            margin-left: 0;
        }
    }
    .page-products.page-layout-1column .products-grid .product-item { width: 100%/5 }
    .page-products.page-layout-3columns .products-grid .product-item { width: 100%/4 }
}

which defines the breakpoints at when the grid will shift from 5 to 4 to 3. When I have had to change this around, I just do it in the styles, based on what I need, just change the math around to work with the design.

2
  • I'll start testing the obvious 5 vs 4 values but does the following code need to change? .page-products .products-grid .product-item { width: 23.233%; margin-left: calc(~"(100% - 4 * 23.233%) / 3"); padding: 0; &:nth-child(4n+1) { margin-left: 0; } }
    – Qozmiq
    Jun 15, 2016 at 13:00
  • No, that's the right code for 4 products (i think), but the easiest way to get the right values is to grab them from the browser. When you reduce the width on your screen you will see the grid change from 5 products to 4 or 4 products to 3. Just inspect those elements and grab the values from the <li class="product-item"> into your code. But the idea of the code is to create a fixed width of 23.233% for the elements and to add the right margin to space out the products visually. The nth-child part of the styles is just to remove the margin on the last product, counting from zero.
    – circlesix
    Jun 15, 2016 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.