WooCommerce products in row settings

[matanmn33]

Hello everyone and thank you for coming to this discussion.
I'm using the latest version of BootCommerce as my main child theme for my client's online shop.
When trying to change the products per row or per page from the "Customizer" - nothing happens, i mean the products per row always stay as it was before (4 products per row in Desktop View and 1 product per row in Mobile View).
I want to change the Products per Row in the mobile to 2 and in Desktop to 5 or whatever.
Screenshot: https://prnt.sc/yeBPgijpU_AX
I know it can be changed via the CSS and the back-end structure but only?
(btw, i'm a front-end developer and co-fullstack developer so to change it via commands and lang is not problem)

[crftwrk]

Hello,

Customizer settings won't work, because Bootstrap's grid is used instead of WooCommerce cols. You have to override loop template as described here https://woocommerce.com/document/template-structure/ in your child.

• Copy woocommerce/content-product.php https://github.com/bootscore/bootscore/blob/main/woocommerce/content-product.php from main-theme to your child using the same folder structure.
• Change col-md-6 col-lg-4 col-xxl-3 in line 29 to col-6 col-lg-4 col-xxl-2. Now you have 2 col mobile, 3 cols lg and 6 cols on xxl screens. Check https://getbootstrap.com/docs/5.3/layout/grid/ for more options about the grid.

Does this help?

[matanmn33]

It helped me a bit, the structure of bootstrap is really fun and enjoyable i really like work on platforms using bootstrap framework but here it is more like the opposite of how i work with bootstrap usually, should not it be col-lg-6 col-md-4 col-sm-3 col-xs-2 (something like this) instead of how it works in the content-product.php?

[crftwrk]

What do you mean exactly? content-product.php is the loop template with the cards and Woo cols are replaced by Bootstrap's cols. You can use any col-*-* classes as you want to change grid. Default is 1 (xs), 2 (md), 3 (lg) and 4 (xxl) by using col-md-6 col-lg-4 col-xxl-3 classes.

[matanmn33]

It was my mistake with the structure of grid and columns of bootstrap.
I found col-6 col-sm-4 col-lg-3 more intuitive so in screens it goes like Desktops and Large Screens - 4 Products in row | Laptops and Small Screens - 3 Products in row | Mobile and smaller screens - 2 Products in row.
Thanks for the help and support.
I think it is important to make it clear that the first class col-6 is the actual size of the mobile screens (not?) so if someone find this discussion and want to understand the ground it will help.
Your first answer helped a lot.
Thanks again.