Rows of products have "breaks" in them – uneven number of products in each row

I’m assuming that woo-shop.css is part of the theme? If so you can change back the file that you modified and change this on line 662 or woo-shop.css:

.woocommerce ul.products li.product.first {
clear: left;
}

to this:

.woocommerce ul.products li.product.first {
clear: none;
}

That should fix the issue.

I think that will fix the extra row of products problem, not sure it will introduce a margin between products.

The page has a right sidebar area which the products can’t use. The sidebar is nearly empty, so the page layout looks unbalanced. Maybe you’ve got something else to go in the sidebar.

Your theme has set 4 products per row, that’s a “first”, two middles and a “last”. “first” and “last” are classes on the li tag.

When there isn’t enough space for 4 products on a row, the 4th one, which is a “last” is the one that spills over. Because its a “last”, it triggers another new line.

The number of products per row can be changed with this code used in functions.php for a child theme:
https://docs.woothemes.com/document/change-number-of-products-per-row/

You could put a right margin on the products with this in your custom css:

.woocommerce .products .product {margin-right:1%}

but then the 4th product would trip over to the next line. To get 4 to a line, and keep the right margin, you also need to make each product a bit smaller, which you can do with the width property:

.woocommerce .products .product {width:24%; margin-right:1%}

So its a design exercise to balance the number of products per row, the width of each product and the right margin until it all looks how you want it.

I suggest you don’t use your theme stylesheet for new css because it may be overwritten by the next theme update. Use custom css instead.

I’m not familiar with your theme. Some themes have the facility to enter custom css. This may be at Appearance > Customise or Appearance > Theme Options. It may be called Custom CSS or Advanced Settings.

If your theme does not have this feature, you can use a plugin like this one:
https://www.ads-software.com/plugins/simple-custom-css/

Hi there, I’m wondering if anyone has any other experiences with this situation; my current problem is similar in that I started out with the normal woocommerce template that had 3 products per row and now it has inconsistencies.

It will have 2 products per row but in uneven positions.

It’s not my Custom CSS, and I don’t have much in my child theme (I’ve removed each file to check if it was affecting it).

Any advice would be greatly appreciated, thank you.

Your products are marked up for 4 to a row when there is room for only 3.
There is advice here about how to set the number of products per row:
https://docs.woothemes.com/document/change-number-of-products-per-row/

If you can’t change the number per row, this custom css should fix the issue:

.site-main ul.products li.product {height:280px; margin-right:1.7em}
.site-main ul.products li.product.first {clear:none !important}
.site-main ul.products li.product.last {margin-right:1.7em !important}

Thank you!! That was the trick; so strange, I really don’t remember having it stagger until recently…can I ask how you were able to figure it out so that I can learn how to work backwards for future problem-solving?

Do the course:
https://www.w3schools.com/css/default.asp
Get to know the tools:
https://developer.chrome.com/devtools
Practice!