Hey guys, I just faced the same problem as described here. But instead of 4 products in the upsells-section I've tried to get 5 products in that section.
Result was that five products were shown in upsells-section but grid-view in "Shop" and "Category" was broken - example for that.
My CSS basing on your above code is:
.woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product { width: 18% !important; }
@paderdeko We are sorry but it is not possible to do it anymore. The only place where you can set number of related products is Theme options > Blog, Portfolio & Shop > Shop section.
@paderdeko No, we didn't changed anything. Only WooCommerce changes their stuff constantly and everything is dependent on plugin's author only. Like we wrote above, what you ask for requires files customization now and is not possible with custom css.
But as a result of this code, that happens: EXAMPLE
Next discussion with WC-author Mike Jolley showed up that this malfunction is due to theme code.
So don't feel offended now but it seems that our beTheme is the reason why more than 3 products in a row in upsells section won't work. Can you check this once more please and have a look at that penomenon? And if it takes more than you thought, could you at least put that feature on your roadmap as it is asked by several customers here in the forum.
@paderdeko If you send us access to your dashboard and FTP privately, we may switch to default WP theme and check. And if it would work the same on default theme as with the BeTheme, there would be nothing what we can do because each plugin need to work the same way with BeTheme as with any default theme.
I've also checked that option and with theme twentysixteen the problem doesn't occure in the above documented way. Products are all lined-up correct but only 4 products show up - instead of my 5.
You'll get an account for dashboard and FTP like asked. I'll send it via themeforrest.
Comments
.woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product { width: 23% !important; }.woocommerce ul.products:not(.col-4) li.product:nth-child(3n+1) { clear: none !important; }
And if it takes more than you thought, could you at least put that feature on your roadmap as it is asked by several customers here in the forum.
body.woocommerce .related ul.products li.product:nth-child(2n+1), .woocommerce .upsells.products ul.products li.product:nth-child(2n+1),
body.woocommerce .related ul.products li.product:nth-child(3n+1), .woocommerce .upsells.products ul.products li.product:nth-child(3n+1) {clear: none !important; }
body.woocommerce .related ul.products li.product:nth-child(5n+1), .woocommerce .upsells.products ul.products li.product:nth-child(5n+1) {clear: both !important; }
@media only screen and (max-width: 767px) {
body.woocommerce .related ul.products li.product, .woocommerce .upsells.products ul.products li.product { width: 48% !important;}
body.woocommerce .related ul.products li.product:nth-child(5n+1), .woocommerce .upsells.products ul.products li.product:nth-child(5n+1) {clear: none !important; }
body.woocommerce .related ul.products li.product:nth-child(2n+1), .woocommerce .upsells.products ul.products li.product:nth-child(2n+1) {clear: both !important; }
}