Ok. So as we see, you can change the width of the products. At this moment each product is 30% width so it is possible to display maximum 3 products. If you want to display 4, change width to 25% with below css:
.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: 25% !important; }
@jkperez Above css's works of course but we have found lots of bugs in your custom css section where you did many customization on your own. Just move above css's into 1st line of custom css section and you will see that we are right. In reference to 2nd question, we do not have anything like this included unfortunately.
Comments
please send us url to site where you got related products and we'll see if there is anything what we can do for you.
.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: 25% !important; }.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; }