[Plugin: WooCommerce – excelling eCommerce] modify related products thumbnail sizes

Hi Paul,

I am a relatively new woocommerce user, however, I adjusted the percentage at which they were viewed in the woo commerce.css. Be sure to make a backup copy. The file has all the selectors running together but if you have the patience you can break them out so you can actually see each selector individually. Then use Firebug in Chrome to “Inspect Element” and you should be able to find the class or selected that relates to the “related images”.

Link to firebug
https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench

Mine is here:
.related ul.products li.product img, .upsells.products ul.products li.product img, .related ul li.product img, .upsells.products ul li.product img {
width: 100%;
height: auto;

It gives you the reference (lline number) that it is at in the code. Mine is viewing like this: /shop/productitem/woocommerce.cs:452

Hope that helps.

** correction: /shop/productitem/woocommerce.css:452

productitem – being whatever your item name is.

thanks for your suggestion.
I chnaged the width to auto instead of 100%

You are welcome.

JUST FYI – for those with Mantra Theme
I was having a similar problem with my shopping cart – related product images too big. A more accurate description of my problem can be found here: https://kaptinlin.com/support/discussion/6234/woocommerce-related-products-size-spacing/p1

Nutshell: Related product images were HUGE, and though I was able to shrink them down with some code, it wasn’t shrinking the clickable area. GAH! However, through hours of trial and error, I used the following code, which I inserted into the Custom CSS area under Miscellaneous Settings in the Mantra Theme

/* To change the size of the related products thumbnails, which are too large */?
.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: 150px;
}

Worked like a charm!! But I was also having problems with only two items displaying in the bottom. However, I used the code mentioned at the end of the post linked above, but made a slight modification. This code below was added to the functions.php file (Appearance > Editor > Mantra Theme > Theme Functions). Be sure to put this PRIOR to the “?>”. The question-mark-bracket needs to be the last bit of code on that sheet. ??

// Redefine woocommerce_output_related_products()
function woocommerce_output_related_products() {
woocommerce_related_products(4,4); // Display 4 products in rows of 4
}

I hope that helps anyone who was having the same issue I was.

Arial Burnz