Try this in your custom css:
.related.products {width:50%}
As the images displayed have around 150px width, i suggest adding the following code in your custom CSS:
.woocommerce .related ul.products li { width:150px !important; display:block; }
.woocommerce .related ul.products li img { max-width:150px; height:auto; }
This sets the wrapper of the related product’s width to 150px and the image is also set to a maximum of 150px.
Hope this helps!
ok guys im a big noob where do i put this that it doesnt go away when it updates? thanks for your answers by the way
ah i got simple custom css and it worked thanks so much guys
wooassist – thank you so much that code worked! Have spent about 2 hours trying to do that but was using %! 🙂
these codes about related item re sizing i could not find out in woocommerce.css in latest version.
i m using wordpress version 4.2.1–en_CA with mantra theme so suggest me how i solve?
yes i find out about related items if you like to resizing its available in
woocommerce-layout.css in wordpress latest version 4.2
upsells.products ul.products li.product img{width:100%;height:auto}.woocommerce ul.products,.woocommerce-page ul.products{clear:both}.
you can change width to 30 or 40 % as you wish to resizing the related items
woocommerce-layout.css may get overwritten by plugin updates, so the suggested method is to use a custom css setting. If your theme does not have a setting where you can enter custom css, you can use a plugin like this one:
https://wordpress.org/plugins/simple-custom-css/
