Dear SiteOrigin,
I’ve been trying to set a shop that displays 3 products per line, that means I had to enlarge the right-margin and also the width percentage. I did so. I also deleted everything in the sidebar to make it disappear and have a fullwith shop. Te problem is, that the second line shows only one producto, and the other two products are in a third line. Why is that?
http://lamanoediciones.cl/wordpress/tienda/
Thanks in advance!
Hi Rae
You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product:nth-of-type(3n) { clear: right; margin-right: 0; }Thank you Andrew!
:)
For sure :)
Dear Andrew,
the problem persists. I put the code you told me but images displayed without space between them. After that I put a margin between images because I need them to have space. An also to center everything. Everything was all right, but when I uploaded new products, the problem was still there: there is a line with only one product.
http://lamanoediciones.cl/wordpress/tienda/
I hope you can help me with that!
Thanks!
Hi Rae
Let’s try the following:
1. Download the following child theme which will get WooCommerce to set the products per row to three:
https://siteorigin.com/wp-content/uploads/2015/12/vantage-child-woo-3-per-row.zip
2. Install from Appearance > Themes > Add New: Upload Theme.
3. Activating a child theme will cause menu location and Customizer > Theme Design settings to reset, this is an expected result. Test the child theme out before redoing settings.
Remove our previous Custom CSS with regards to WooCommerce product widths and margins. Add the following instead:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 30.05%;
}
This seems to be working well for me in testing.
Hope it helps.